Sett inn bilder med HTML - hvordan det fungerer
Hvis du vil sette inn et bilde på nettstedet ditt med HTML, bruker du img-koden. Les her hvordan dette fungerer og hva du må passe på.
Slik setter du inn bilder med HTML - det grunnleggende
- Med dagen
kan sette inn bilder. - Bildekilden er gitt i taggen:
setter inn filen "testbild.webp" fra undermappen "bilder" på nettstedet. - Eksterne kilder via URL er også mulig:
integrerer CHIP-logoen fra serverne våre.
HTML-attributter for innebygde bilder
Tallrike attributter kan legges til i img-koden:
- Bruk "bredde" og "høyde" for å bestemme størrelsen på bildet på nettstedet: Bildet
vises firkantet med en sidelengde på 100 piksler. - Med "alt" definerer du en alternativ tekst som vises hvis det respektive bildet ikke kan lastes. Du bør alltid angi denne attributtet når du setter inn bilder med HTML.
- Attributtet "border" spesifiserer tykkelsen på rammen i piksler. Et bilde med
har en ramme som er relativt tykk med fem piksler. - Bruk "juster" for å justere grafikken. Verdiene for dette attributtet er "bunn", "topp", "midt", "venstre", "høyre" og "sentrum".
- Med "hspace" og "vspace" kan du (horisontalt og vertikalt) stille avstand til bildet.
Hvilket format skal jeg bruke?
Det er forskjellige bildeformater som du kan inkludere i HTML-koden.
- JPG: JPG-format blir ofte brukt på websider. Dette formatet representerer 16, 7 millioner farger. I tillegg kan en JPG komprimeres veldig godt. Bildefilen kan derfor gjøres veldig liten, noe som gir en rask lastetid.
- PNG: PNG-formatet kan også vise 16, 7 millioner farger og kan komprimeres. Fordelen i forhold til JPG-formatet er at komprimeringen er mulig uten tap.
- Områder definert i PNG-format kan også vises transparent. Veldig gamle nettlesere har imidlertid problemer med å vise transparenter.
- GIF: Hvis du vil sette inn bevegelige bilder med HTML, er GIF-formatet egnet. Bare 256 farger vises i dette formatet og komprimering foregår automatisk uten noen innstillingsalternativer.
- GIF-formatet er best egnet for liten, animert grafikk eller logoer. For å sikre at logoer passer harmonisk inn på en side, kan transparenter brukes i GIF-format som en PNG.
HTML eksempel
- Dette integrerer CHIP-logoen fra vår hjemmeside.
- Det vises med en høyde på 100 piksler og en bredde på 200 piksler.
- Hvis den ikke kan lastes, vises "CHIP-Logo" som blank tekst.
- Bildet er innrammet av en ramme med to piksler.
- Den er rettjustert og er 50 piksler fra hverandre fra andre sideelementer.