HTML Bild

Genom att använda HTML kan du visa bilder i dokumentet.

Exempel

Infoga bild
Detta exempel visar hur man visar bilder på en webbsida.
Infoga bilder från olika platser
Detta exempel visar hur man visar bilder från andra mappar eller servrar på en webbsida.

（Mer exempel hittar du på sidans botten)

Bildetikett (<img>) och källattribut (Src)

I HTML definieras en bild med <img>-etiketten.

<img> är en tom etikett, vilket innebär att den bara innehåller attribut och ingen stängningsetikett.

För att visa en bild på sidan måste du använda källattributet (src). src betyder "källa". Värdet för källattributet är bildens URL-adress.

Syntaksen för att definiera en bild är:

<img src="url" />

URL pekar på var bilden lagras. Om bilden med namnet "boat.gif" finns i mappen "images" på www.codew3c.com, är dess URL http://www.codew3c.com/images/boat.gif.

Webbläsaren visar bilden på det ställe där bildetiketten finns i dokumentet. Om du placerar bildetiketten mellan två paragrafer, kommer webbläsaren att visa den första paragrafen först, sedan bilden och slutligen den andra paragrafen.

Ersätt textattribut (Alt)

Ersättnings text-attributet används för att definiera en rad förutbestämd ersättnings text för bilden. Värdet för ersättnings text-attributet är definierat av användaren.

<img src="boat.gif" alt="Stor båt">

När en webbläsare inte kan ladda in en bild, informerar ersättnings text属性 läsarna om den information som förlorats. I detta fall visar webbläsaren denna ersättnings text istället för bilden. Det är en bra vana att lägga till ersättnings text för alla bilder på sidan, vilket hjälper till att bättre visa information och är mycket användbart för dem som använder ren textwebbläsare.

Grundläggande förhållanden - användbara tips:

Om en HTML-fil innehåller tio bilder, måste 11 filer laddas in för att korrekt visa sidan. Laddning av bilder tar tid, så vårt råd är: Använd bilder med försiktighet.

Mer exempel

Bakgrundsbild
Detta exempel visar hur man lägger till en bakgrundsbild till en HTML-sida.
Anordna bilder
Detta exempel visar hur man arrangerar bilder i texten.
Flytande bild
Detta exempel visar hur man gör bilden att flyta till vänster eller höger i en paragraf.
Justera bildstorlek
Detta exempel visar hur man justerar storleken på en bild.
Visa ersättnings text för bilder
Detta exempel visar hur man visar ersättnings text för bilder. När en bild inte kan laddas in av webbläsaren, informerar ersättnings text属性 läsarna om den information som förlorats. Det är en bra vana att lägga till ersättnings text för alla bilder på sidan.
Skapa bildlänk
Detta exempel visar hur man använder en bild som en länk.
Skapa en bildkarta
Detta exempel visar hur man skapar en bildkarta med klickbara områden. Varje område är en hyperlänk.
Konvertera bilden till en bildkarta
Detta exempel visar hur ett vanligt bild visas som en bildkarta.

Bildelement

Tagg Beskrivning
<img> Definiera en bild.
<map> Definiera en bildkarta.
<area> Definiera klickbara områden i en bildkarta.