Man kan sätta in bilder i dokumentet genom att använda IMG SRC<br>
<div class=code>
<IMG SRC="Demo.gif" WIDTH=100 HEIGHT=100 ALT="En liten bild för demobruk"></div>
<IMG SRC="../images/demo.gif" WIDTH=100 HEIGHT=100 ALT="En liten bild för demobruk">
Det är viktigt att sätta Alt="en förklarande text" av flera orsaker:<OL COMPACT TYPE=a>
<LI>För att snabba upp visningen kan man i de flesta Browsers stänga av bildvisningen. Om bilder inte visas så kommer ALT texten istället.
<LI>I vissa browsers så kan man sätta musmarkören ovanpå en bild varvid ALT texten dyker upp som en "ToolTip"
<LI>Blinda kan använda Internet. De använder då ett DOS baserat program som heter Lynx tillsammans med ett program som "läser skärmen". Detta program kan inte visa bilder. Hur förklarar man en bild åt en blind med hjälp av ett dataprogram, det enda programmet kan gör är ju att räkna färgerna men någon analys kan det inte göra!
</OL>
Det är inte helt nödvändigt att sätta WIDTH och HEIGHT (som mäts i antal pixels) med det förenklar arbetet för browsern och snabbar upp visningen av sidan.<br>
<br>
För att hantera hur bilder och texter skall "samarbeta" på sidan kan man använda ALIGN
<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR><TH>Värde för ALIGN</TH><TH>Betydelse</TH></TR>
<TBODY>
<TR><TD>TOP</TD><TD>Överkanten av bilden (vertikalt)</TD></TR>
<TR><TD>MIDDLE</TD><TD>Mitten av bilden (vertikalt)</TD></TR>
<TR><TD>BOTTOM</TD><TD>Nedre kanten av bilden (vertikalt)</TD></TR>
<TR><TD>CENTER</TD><TD>Mitten av bilden</TD></TR>
<TR><TD>LEFT</TD><TD>Bilden kommer till vänster och texten hålls till höger (Kanske mesta användbara)</TD></TR>
<TR><TD>RIGHT</TD><TD>Bilden kommer till höger och texten till vänster om denna</TD></TR>
</TABLE>
<HR>
<div class=code>
<IMG SRC="Demo.gif" ALIGN=TOP>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></div>
<IMG SRC="../images/demo.gif" ALIGN=TOP>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br clear=all>
<HR>
<div class=code>
<IMG SRC="Demo.gif" ALIGN=MIDDLE>Och här kommer en text som skrivs in direkt efter <br>
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></div>
<IMG SRC="../images/demo.gif" ALIGN=MIDDLE>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br clear=all>
<HR>
<Font face="Courier" COLOR=#800000><div class=code>
<IMG SRC="Demo.gif" ALIGN=CENTER>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></Font></div>
<IMG SRC="../images/demo.gif" ALIGN=CENTER>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br clear=all>
<HR>
<Font face="Courier" COLOR=#800000><div class=code>
<IMG SRC="Demo.gif" ALIGN=BOTTOM>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></Font></div>
<IMG SRC="../images/demo.gif" ALIGN=BOTTOM>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br clear=all>
<HR>
<Font face="Courier" COLOR=#800000><div class=code>
<IMG SRC="Demo.gif" ALIGN=LEFT>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></Font></div>
<IMG SRC="../images/demo.gif" ALIGN=LEFT>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br clear=all>
<HR>
<br clear=all>
<Font face="Courier" COLOR=#800000><div class=code>
<IMG SRC="Demo.gif" ALIGN=RIGHT>Och här kommer en text som skrivs in direkt efter
att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br></Font></div>
<IMG SRC="../images/demo.gif" ALIGN=RIGHT>Och här kommer en text som skrivs in direkt efter att vi satt in en bild. Observera hur den hanteras av de olika ALIGN<br>
<br clear=all><HR>
För att stänga av ovanstående formateringar kan man använda <Font face="Courier" COLOR=#800000><div class=code><BR CLEAR=LEFT> eller
<BR CLEAR=RIGHT> eller
<BR CLEAR=ALL></Font></div><br>