HTML billeder

Ved hjælp af HTML kan du vise billeder i dokumentet.

Eksempel

Indsæt billede
Dette eksempel viser, hvordan du viser billeder på en webside.
Indsæt billeder fra forskellige steder
Dette eksempel viser, hvordan du kan vise billeder fra andre mapper eller servere på en webside.

（Du kan finde flere eksempler på siden)

Billedetiketten (<img>) og kildeegenskaben (Src)

I HTML defineres billeder ved <img>-etiketten.

<img> er en tom etiket, hvilket betyder, at den kun indeholder egenskaber og ingen afsluttende tag.

For at vise et billede på siden skal du bruge kildeegenskaben (src). src betyder "kilde". Værdien for kildeegenskaben er billedets URL-adresse.

Syntaksen til at definere et billede er:

<img src="url" />

URL angiver placeringen af billedet. Hvis billedet med navnet "boat.gif" befinder sig i mappen "images" på www.codew3c.com, er dens URL http://www.codew3c.com/images/boat.gif.

Browseren viser billedet på stedet, hvor billedetiketten optræder i dokumentet. Hvis du placerer billedetiketten mellem to afsnit, vil browseren først vise det første afsnit, derefter billedet, og til sidst det andet afsnit.

Erstat tekstattribut (Alt)

The alt attribute is used to define a string of alternative text for the image. The value of the alternative text attribute is user-defined.

<img src="boat.gif" alt="Big Boat">

When the browser cannot load the image, the alternative text attribute can inform the reader of the information they have lost. In this case, the browser will display this alternative text instead of the image. It is a good habit to add alternative text attributes to all images on the page, which helps to display information better and is very useful for those who use text-only browsers.

Basic considerations - useful tips:

If an HTML file contains ten images, then to display this page correctly, 11 files need to be loaded. Loading images takes time, so our suggestion is: use images sparingly.

More Examples

Background image
This example demonstrates how to add a background image to an HTML page.
Align images
This example demonstrates how to align images in text.
Float image
This example demonstrates how to float an image to the left or right of the paragraph.
Adjust image size
This example demonstrates how to adjust the size of an image.
Display alternative text for images
This example demonstrates how to display alternative text for an image. When the browser cannot load the image, the alternative text attribute tells the reader what information is lost. It is a good habit to add alternative text attributes to all images on the page.
Make an image link
This example demonstrates how to use an image as a link.
Create an image map
This example shows how to create an image map with clickable areas. Each area is a hyperlink.
Convert an image to an image map
This example shows how to set a normal image as an image map.

Image Tag

Tag Description
<img> Define an image.
<map> Define an image map.
<area> Define the clickable area in an image map.