HTML Image I'm having a hard time putting an image in my web page. I'm using Windows notepad

Question

I'm having a hard time putting an image in my web page. I'm unsing Windows notepade. All that comes up is a white box with three different shapes in different colors. Here is the code that I'm using:

<img src="sample1.gif"width="144" height="50">

The image and website are both saved on my desktop. I've also tried making a new fold in my documents and put bot html and image file in it but that did not work.

Thanks!!

Answer 1

minimal uncorrect but working html

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;title&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;img src=&quot;img.gif&quot; width=&quot;144&quot; height=&quot;50&quot;&gt;

&lt;/body&gt;

&lt;/html&gt;

save it as .html, and it must work.

Answer 2

Well let&#039;s see here.  Be sure to save the notepad file as a .html &amp; make sure to save it in the same folder as your image.  The easiest way create the two files is this

1. create a new folder and name it whatever you want.

2.  Save the image file into that folder

3  Save the .html file you just created also in that file.

If the two are in different folders the code must have the &quot;/&quot; mark meaning go into a folder.  So if you have the image in a folder named images in the main folder (where your .html file is saved) the code should be like this...

&lt;img src=&quot;images/sample1.gif&quot;width=&quot;144&quot; height=&quot;50&quot;&gt;

Hope that helps!

Answer 3

Updated:  The spacing problem with the width attribute is NOT causing the problem. The closing quote mark separates it.  You could write it: &lt;img src=&quot;sample1.gif&quot;width=&quot;144&quot;height=&quot;50&quot;&gt; if you wanted.  Just make sure there is always a space for the tag name &quot;&lt;img ...&quot;

There is no such think as &quot;pix&quot; dimension.  You don&#039;t need a dimension unless you use styling as my example shows.

Never leave out the sizes for an image.  Helps the to know what size to set aside as it parses your page.

If the notepad file has been saved as an *.html and the image resides in the same folder, then it should work when viewing in your browser.  Just drag and drop the HTML file into your open browser window to view.

The only other thing is that possibly you have not made an HTML file by not including a document type and all the required HTML tags so the browser has no idea what to do with it.

For the image tag coding, may I suggest using this:

&lt;img style=&quot;width: 144px; height: 50px; border: 0;&quot; src=&quot;sample1.gif&quot; alt=&quot;Sample GIF&quot;&gt;

Ron

Answer 4

OK, I had to pull my Copy of CIGHTML off the shelf.  First: put a space before &quot;width&quot;.  Then check that your picture file and the file name in the img tag are spelled correctly.  It&#039;s not so important in windows, but when you put the page up on a server, you will want to check the letter case.  Many servers are case sensitive with file names.

Try the image tag without the width and height attributes.  

Try specifying the size in pix, IE: width=&#039;144pix&#039;