Ievietojiet attēlus ar HTML - kā tas darbojas
Ja vēlaties savā vietnē ievietot attēlu ar HTML, izmantojiet tagu img. Lasiet šeit, kā tieši tas darbojas un kas jums jāuzmana.
Attēlu ievietošana ar HTML - pamati
- Ar dienu
var ievietot attēlus. - Attēla avots ir norādīts tagā:
ievieto failu "testbild.webp" no apakšmapes "bildes" vietnē. - Ir iespējami arī ārēji avoti, izmantojot URL:
integrē CHIP logotipu no mūsu serveriem.
Iegulto attēlu HTML atribūti
Img tagā var pievienot daudzus atribūtus:
- Izmantojiet "platums" un "augstums", lai noteiktu attēla lielumu vietnē: Attēls
tiek parādīts kvadrātā ar sānu garumu 100 pikseļi. - Ar "alt" jūs definējat alternatīvu tekstu, kas tiek parādīts, ja attiecīgo attēlu nevar ielādēt. Ievietojot attēlus ar HTML, šis atribūts vienmēr jāiestata.
- Atribūts "border" norāda rāmja biezumu pikseļos. Attēls ar
ir rāmis, kas ir samērā biezs ar pieciem pikseļiem. - Izmantojiet "līdzināt", lai izlīdzinātu grafiku. Šī atribūta vērtības ir "apakšā", "augšpusē", "vidū", "pa kreisi", "pa labi" un "centrā".
- Izmantojot "hspace" un "vspace", jūs varat (horizontāli un vertikāli) iestatīt attālumu līdz attēlam.
Kuru formātu izmantot?
Ir dažādi attēlu formāti, kurus varat iekļaut HTML kodā.
- JPG: Web lapās visbiežāk izmanto JPG formāta attēlus. Šis formāts apzīmē 16, 7 miljonus krāsu, turklāt JPG var ļoti labi saspiest. Tāpēc attēla failu var padarīt ļoti mazu, kas nodrošina ātru ielādēšanas laiku.
- PNG: PNG formātā var attēlot arī 16, 7 miljonus krāsu un to var saspiest. Priekšrocība salīdzinājumā ar JPG formātu ir tāda, ka saspiešana ir iespējama bez zaudējumiem.
- PNG formātā definētos apgabalus var parādīt arī caurspīdīgi. Tomēr ļoti veciem pārlūkiem ir problēmas ar caurspīdīgo filmu parādīšanu.
- GIF: Ja vēlaties ievietot kustīgus attēlus ar HTML, ir piemērots GIF formāts. Šajā formātā tiek parādītas tikai 256 krāsas, un saspiešana notiek automātiski, bez iestatīšanas opcijām.
- GIF formāts ir vispiemērotākais maziem, animētiem grafikiem vai logotipiem. Lai logotipi harmoniski ietilptu lapā, caurspīdīgās plēves var izmantot GIF formātā, piemēram, PNG.
HTML piemērs
- Tas integrē CHIP logotipu no mūsu vietnes.
- Tas tiek parādīts ar 100 pikseļu augstumu un 200 pikseļu platumu.
- Ja to nevar ielādēt, "CHIP-Logo" tiek parādīts kā tukšs teksts.
- Attēlu ierāmē divu pikseļu rāmis.
- Tas ir izlīdzināts pa labi un ir 50 pikseļu attālumā no citiem sānu elementiem.