Indsæt billeder med HTML - hvordan det fungerer
Hvis du vil indsætte et billede på dit websted med HTML, skal du bruge img-mærket. Læs her, hvordan det præcist fungerer, og hvad du skal passe på.
Sådan indsættes billeder med HTML - det grundlæggende
- Med dagen
kan indsætte billeder. - Billedkilden er angivet i tagget:
indsætter filen "testbild.webp" fra undermappen "billeder" på webstedet. - Eksterne kilder via URL er også mulige:
integrerer CHIP-logoet fra vores servere.
HTML-attributter til indlejrede billeder
Talrige attributter kan tilføjes i img-mærket:
- Brug "bredde" og "højde" til at bestemme størrelsen på billedet på webstedet: Billedet
vises firkantet med en sidelængde på 100 pixels. - Med "alt" definerer du en alternativ tekst, der vises, hvis det respektive billede ikke kan indlæses. Du skal altid indstille denne attribut, når du indsætter billeder med HTML.
- Attributen "border" specificerer tykkelsen på rammen i pixels. Et billede med
har en ramme, der er relativt tyk med fem pixels. - Brug "align" til at justere grafikken. Værdier for denne attribut er "bund", "top", "midt", "venstre", "højre" og "center".
- Med "hspace" og "vspace" kan du (vandret og lodret) indstille en afstand til billedet.
Hvilket format skal jeg bruge?
Der er forskellige billedformater, som du kan inkludere i HTML-koden.
- JPG: JPG-formatbilleder bruges mest til websider. Dette format repræsenterer 16, 7 millioner farver. Derudover kan en JPG komprimeres meget godt. Billedfilen kan derfor laves meget lille, hvilket muliggør en hurtig indlæsningstid.
- PNG: PNG-formatet kan også vise 16, 7 millioner farver og kan komprimeres. Fordelen i forhold til JPG-formatet er, at komprimeringen er mulig uden tab.
- Områder, der er defineret i PNG-format, kan også vises gennemsigtigt. Meget gamle browsere har imidlertid problemer med at vise transparenter.
- GIF: Hvis du vil indsætte bevægelige billeder med HTML, er GIF-formatet egnet. Kun 256 farver vises i dette format, og komprimering finder sted automatisk uden nogen indstillingsmuligheder.
- GIF-formatet er bedst egnet til små, animerede grafikker eller logoer. For at sikre, at logoer passer ind på en side, kan transparenter bruges i GIF-format som en PNG.
HTML-eksempel
- Dette integrerer CHIP-logoet fra vores websted.
- Det vises med en højde på 100 pixels og en bredde på 200 pixels.
- Hvis det ikke kan indlæses, vises "CHIP-Logo" som tom tekst.
- Billedet er indrammet af en to-pixel ramme.
- Det er højrejusteret og er 50 pixels fra hinanden fra andre sideelementer.