Teksta redaktorā, piemēram, Notepad vai tīmekļa izstrādes programmatūrā, atveriet tās Web lapas HTML failu, kurai vēlaties pievienot attēlu.
Pievienojiet failam tagu. Ievietojiet tagu aiz elementa, zem kura vēlaties parādīt attēlu, kad HTML fails tiek atvērts pārlūkprogrammā. Tagam nav atsevišķas noslēguma atzīmes. Tagā ir jānorāda attēla avots, kuru vēlaties parādīt, ierakstot attēla atrašanās vietu internetā ar src atribūts. Ja attēls ir saglabāts tajā pašā mapē, kurā atrodas HTML fails, ierakstiet attēla nosaukumu un paplašinājumu. Ja attēls ir saglabāts citur, ierakstiet pilnu attēla URL.
Pievienojiet alt atribūtu jūsu tagam. HTML5 ir nepieciešams alt atribūts. Izmantojiet šo atribūtu, lai aprakstītu attēlu gadījumā, ja to nevar ielādēt. Ja attēlu nevar ielādēt, pārlūkprogramma parāda ievadīto tekstu aiz alt atribūta. Turklāt alt atribūts ir svarīgs ekrāna lasītāja programmatūrai, ko izmanto cilvēki ar redzes traucējumiem. Programmatūra nolasa tekstu alt atribūtā, lai persona ar redzes invaliditāti, kas skata jūsu vietni, varētu dzirdēt attēlā redzamo, kaut arī to neredz.
Norādiet attēla izmērus pikseļos ar augstums un platums atribūti. Ja nenorādīsiet izmērus, pārlūkprogramma nezina, cik daudz vietas atstāt attēlam, kad lapa tiek ielādēta. Tā rezultātā lapa tiek ielādēta nemierīgi, jo teksts tiek ielādēts vispirms, atstājot attēlam nelielu vietu, un pēc tam attēla ielādes laikā tā tiek sadalīta un vieta tiek paplašināta. Izmantojot norādītos izmērus, pārlūkprogramma atstāj tieši tik daudz vietas starp citiem lapas elementiem, lai attēls tiktu aizpildīts, kad tas ir ielādēts.
Pārbaudiet savu kodu, lai pārliecinātos, ka attēls tiek rādīts pareizajā vietā, pārlūkprogrammā atverot HTML failu.
Izmantojiet CSS, lai pārvietotu attēlu uz ekrāna kreiso vai labo pusi vai lai ap to apvilktu tekstu. Piemēram, varat izmantot style="float: left;" vai style="float: right;" tagā.
Ja nezināt gan attēla augstumu, gan platumu, ir pareizi izmantot tikai augstuma vai platuma atribūtu. Varat arī izmantot CSS, lai norādītu augstumu un platumu; piemēram, 100 x 100 pikseļu attēlam izmantojiet stila atribūtu: style="height: 100px; platums: 100 pikseļi."
Padariet attēlu par klikšķināmu saiti, ievietojot tagu tagu pārī "a href". Piemēram, ja vēlaties, lai attēls būtu saistīts ar Facebook, ierakstiet tālāk norādīto.
Neizmantojiet atribūtu alt, lai mēģinātu uzlabot savas lapas SEO. Meklētājprogrammas jau sen ir apzinājušās, ka daži tīmekļa dizaineri mēģina aizpildīt alt atribūtu ar papildu atslēgvārdiem, un tāpēc viņi ignorē tekstu alt atribūtā.
