Bolton College: HOW FIND IMAGE SRC LINK?

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="font-family: verdana, sans-serif; text-align: center;">
Where are my images?</h1>
<div class="adright" style="float: right; margin: 15px 0px 10px 10px;">
<ins id="aswift_1_expand" style="border: none; display: inline-table; height: 250px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 300px;"><ins id="aswift_1_anchor" style="border: none; display: block; height: 250px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 300px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="250" hspace="0" id="aswift_1" marginheight="0" marginwidth="0" name="aswift_1" scrolling="no" style="left: 0px; position: absolute; top: 0px;" vspace="0" width="300"></iframe></ins></ins></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
<img alt="My Pic" height="80" src="http://www.pagetutor.com/html_tutor/mypic.gif" style="float: left; margin-right: 10px;" width="100" /><i>Dear Joe,<br /><----- I made my page but my images aren't showing up. All I see are little red X's (or blank spots) where the images are supposed to be. What gives?</i></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Ah, if I had a dollar for every time I heard <i>that</i> question. Well, let's just say I'd have a lot of dollars.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
In short, the browser isn't displaying the image because the browser can't <i>find</i> it using the instructions you gave it. Those instructions are the <b>src</b> attribute of the <b>img</b> tag...</div>
<tt class="ttcode"><img <span class="redtext" style="color: #ee0000;">src="mypic.gif"</span> width="100" height="80" alt="My Pic"></tt><br />
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Now, there are a few possible reasons why the browser cannot find the image. You might have one problem going on, or all of them. Let's go through the following exercises to see if maybe we can narrow down the problem.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
First, try putting the image in the same folder as your html document...</div>
<table cellpadding="16" cellspacing="0" class="sources" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: black; font-family: verdana, sans-serif; margin-left: auto; margin-right: auto; width: 650px;"><tbody>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="70" src="http://www.pagetutor.com/html_tutor/missing1.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="mypic.gif"</span></tt> means that the image is in the same folder as the html document that called for it.</td></tr>
</tbody></table>
<div class="adright" style="float: right; margin: 15px 0px 10px 10px;">
<a href="http://media.fastclick.net/w/click.here?cid=564783&mid=1139455&m=6&sid=3157&c=0&tp=8&UD=WhIxNzY0MDI4NDY0NzAyNjcwODGIAf-FRZABr7wimAHVGKABBqgBCPABALICCzgyLjQ0LjYzLjcy&upsid=176402846470267081" target="_top"><img alt="" border="0" height="250" src="http://cdn.fastclick.net/content/adv/cids/783/564783/media1139455.jpg" width="300" /></a></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
This is the simplest way to insert an image. As long as everything is in the same folder, things are pretty simple to find.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Possible snags?</div>
<ul class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
<li class="padded" style="margin-bottom: 10px;">Simple (but common) typo: <span class="redtext" style="color: #ee0000;">scr=</span> instead of <span class="redtext" style="color: #ee0000;">src=</span></li>
<li class="padded" style="margin-bottom: 10px;">Mispelling the image name: <span class="redtext" style="color: #ee0000;">src="mypick.gif"</span> or <span class="redtext" style="color: #ee0000;">src="my pic.gif"</span> instead of <span class="redtext" style="color: #ee0000;">src="mypic.gif"</span></li>
<li class="padded" style="margin-bottom: 10px;">Wrong extension: <span class="redtext" style="color: #ee0000;">src="mypic.jpg"</span> when your image is a gif... <span class="redtext" style="color: #ee0000;">mypic.gif</span>. (<i>Should I use gif or jpg?</i> You might find <a href="http://www.pagetutor.com/gif_or_jpg/index.html">this</a>interesting.)</li>
<li>Malformed img tag...<ul>
<li><nobr><tt class="ttcode"><img src="mypic.gif" width="100" height="80" alt="My Pic"<span class="malformed" style="background-color: #ffff66;"> </span></tt></nobr></li>
<li><nobr><tt class="ttcode"><img src="mypic.gif<span class="malformed" style="background-color: #ffff66;"> </span>width="100" height="80" alt="My Pic"></tt></nobr></li>
</ul>
</li>
</ul>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Before going on to other possible reasons for your missing image, make sure that you can successfully insert an image as shown above.</div>
<hr class="ltdivide" style="background-color: white; color: #aeaeae; height: 1px;" />
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
<i>Ok, Joe, I can do that, but as soon as I put the image into a different folder, I start having troubles.</i></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
It's very common to place images in a folder other than where your html doc resides. It's all fine and dandy, but just keep in mind that you must tell the browser<i>exactly</i> where to find the image. One little mistake.... and image doesn't show up.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Very possibly the cause of your missing image is an improper relative src.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Study the following until you understand how to construct a proper <b>src</b>. I understand it can be confusing... but when you have things in different folders, this is just something you'll have to learn.</div>
<table cellpadding="16" cellspacing="0" class="sources" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: black; font-family: verdana, sans-serif; margin-left: auto; margin-right: auto; width: 650px;"><tbody>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="86" src="http://www.pagetutor.com/html_tutor/missing2.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="images/mypic.gif"</span></tt> means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.</td></tr>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="88" src="http://www.pagetutor.com/html_tutor/missing3.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="../mypic.gif"</span></tt> means that the image is in one folder up from the html document that called for it.</td></tr>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="108" src="http://www.pagetutor.com/html_tutor/missing4.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="../../mypic.gif"</span></tt> means that the image is two folders up from the html document that called for it.</td></tr>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="108" src="http://www.pagetutor.com/html_tutor/missing5.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="../images/mypic.gif"</span></tt> means that the image is one folder up and then another folder down in the images directory.</td></tr>
<tr><td class="sourcesl" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><img alt="" height="162" src="http://www.pagetutor.com/html_tutor/missing6.gif" width="236" /></td><td class="sourcesr" style="border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px;"><tt class="ttcode"><span class="redtext" style="color: #ee0000;">src="../../../other/images/mypic.gif"</span></tt> I'm not even going to try and put this into words. I hope you get the drift.</td></tr>
</tbody></table>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Note that <span class="redtext" style="color: #ee0000;">../</span> means to go up a folder, <span class="redtext" style="color: #ee0000;">../../</span> means to go up two folders, etc.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Also note that in urls, forward slashes are used --> <span class="redtext" style="color: #ee0000;">/</span><br />
rather than a backward slash --> <span class="redtext" style="color: #ee0000;">\</span></div>
<hr class="ltdivide" style="background-color: white; color: #aeaeae; height: 1px;" />
<div class="adright" style="float: right; margin: 15px 0px 10px 10px;">
<ins id="aswift_2_expand" style="border: none; display: inline-table; height: 280px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 336px;"><ins id="aswift_2_anchor" style="border: none; display: block; height: 280px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 336px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="280" hspace="0" id="aswift_2" marginheight="0" marginwidth="0" name="aswift_2" scrolling="no" style="left: 0px; position: absolute; top: 0px;" vspace="0" width="336"></iframe></ins></ins></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
<i>Well, Joe... so far so good. Everything works wonderful until I upload everything to my web host. When viewed on the Internet, my images are missing. Or, while I can view my page just fine, my friends all say the images are missing.</i></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Well, we're definitely starting to narrow down the problem. It's all downhill from here. <img alt=":-)" height="16" src="http://www.pagetutor.com/common/smiley_big-grin.gif" width="16" /></div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
First, check for a case problem. Many web hosts are case sensitive. That is, <span class="redtext" style="color: #ee0000;">src="mypic.gif"</span> is different than<span class="redtext" style="color: #ee0000;">src="Mypic.gif"</span> is different than <span class="redtext" style="color: #ee0000;">src="mypic.GIF"</span> is different than <span class="redtext" style="color: #ee0000;">src="MYPIC.GIF"</span>. I find it's easiest to keep<i>everything</i> lower case.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Another possible cause is that you've instructed the browser to look for the image on your own hard drive. This is common with some HTML editors when they insert an image. If you look at your image tags and the src begins with "<span class="redtext" style="color: #ee0000;">file</span>"...</div>
<tt class="ttcode"><img <span class="redtext" style="color: #ee0000;">src="file:///C:/webpages/images/mypic.gif"</span> width="100" height="80" alt="My Pic"></tt><br />
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
...then the web browser is looking on your hard drive for the image. The problem is that when someone else views the page, the browser trys to look on THEIR hard drive for the image as well. Since they don't have the image on their drive, it comes up missing.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
A proper src is either a relative url (as shown in the illustrations above) or a full url that begins with <span class="redtext" style="color: #ee0000;">http://</span></div>
<hr class="ltdivide" style="background-color: white; color: #aeaeae; height: 1px;" />
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
Chances are about 99.99% that your missing image problem is due to one of the problems shown above. That said, if you've done everything right and still the image no way no how ever shows up, you may have a corrupted image file. It's rare, but it happens.</div>
<div class="regtext" style="font-family: verdana, sans-serif; font-size: 15.039999961853px; font-stretch: normal;">
One way to tell is to drag and drop the image file onto a browser window. If the browser displays the image, then it's probably OK.</div>
<div>
------------------------------------------------------------------------------------------------------------<br />
<br />
<div style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px;">
This article was written in response to a request for information on the <img> tag. Naturally I'm assuming that you're using HTML-Kit as your HTML editor.</div>
<div style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px;">
Let's take a look at the <img> tag and displaying images on our web pages.</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
Getting Started</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
First we need a place to work. You can use any folder (directory) you wish or create one. We'll refer to our working folder as "MyWebFiles."<br />
Now we need an image. You can use one of yours or you can use one of mine shown here.<br />
<img alt="flower01.jpg" border="0" height="125" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_ed96748605915d9e208e9dc047b2d4a3.jpg" style="float: left; margin-right: 2em;" width="125" /><div class="hk13" style="float: right; width: 515px;">
To download it;<ul>
<li>right-click on <a href="http://www.chami.com/html-kit/i/g/cached/flower01.jpg" style="background-color: transparent; color: #011a9b; text-decoration: none;">this link to the image</a> (<a href="http://www.chami.com/html-kit/i/g/cached/flower01.jpg" style="background-color: transparent; color: #011a9b; text-decoration: none;">flower01.jpg</a>)</li>
<li>select "save target as" (the exact wording may be slightly different on your system but should be similar).</li>
<li>save the image to the MyWebFiles folder.</li>
</ul>
</div>
<div class="hk8" style="clear: both;">
</div>
It's worth mentioning here that it is highly recommended that you keep your folder tree on your pc the same as on your web server. This makes it much easier to ensure things will work correctly in both places.</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
Let's Display an Image</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
Launch HTML-Kit. Let's create a new HTML document. From the menu select File | New Document. Save this HTML file in your working directory (i.e. MyWebFiles). Name it whatever you like. Can't think of a name? Then just call it "hkimg.html"<br />
Between the <code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><body></code> and <code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"></body></code> tags type in:<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><img src="flower01.jpg" alt="Yellow Flower" width="125" height="125" ></code>We'll explain what all this means in a little while.<br />
Now click the Preview tab in HTML-Kit. You should see something like this;<br />
<div>
<div class="hk14" style="float: left; width: 205px;">
<img alt="screenshot01 (8K)" border="0" height="225" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_12b39e569d30625cb81c1d24e444a7ad.jpg" width="200" /></div>
<div class="hk13" style="float: right; width: 515px;">
<div class="t16528" style="border: 2px solid rgb(0, 204, 153);">
<div class="t16529" style="background-color: #eeffee; border-bottom-color: rgb(0, 204, 153); border-bottom-style: solid; border-bottom-width: 1px; padding: 3px;">
<strong>HTML : Basic image tag</strong></div>
<div class="t16516" style="clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">1</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16514" style="color: #0099ff;"><</span><span class="t16515" style="color: #0066cc; font-weight: bold;">html</span><span class="t16514" style="color: #0099ff;">></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16518" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">2</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16514" style="color: #0099ff;"><</span><span class="t16515" style="color: #0066cc; font-weight: bold;">head</span><span class="t16514" style="color: #0099ff;">></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16521" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">3</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16519" style="color: #666666;"> </span><span class="t16514" style="color: #0099ff;"><</span><span class="t16515" style="color: #0066cc; font-weight: bold;">title</span><span class="t16514" style="color: #0099ff;">></span><span class="t16519" style="color: #666666;">My page title</span><span class="t16520" style="cursor: help;" title="Closes the 'title' tag. Point to <title> for more information."><span class="t16514" style="color: #0099ff;"><</span><span class="t16514" style="color: #0099ff;">/</span><span class="t16515" style="color: #0066cc; font-weight: bold;">title</span><span class="t16514" style="color: #0099ff;">></span></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16518" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">4</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16520" style="cursor: help;" title="Closes the 'head' tag. Point to <head> for more information."><span class="t16514" style="color: #0099ff;"><</span><span class="t16514" style="color: #0099ff;">/</span><span class="t16515" style="color: #0066cc; font-weight: bold;">head</span><span class="t16514" style="color: #0099ff;">></span></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16521" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">5</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16514" style="color: #0099ff;"><</span><span class="t16515" style="color: #0066cc; font-weight: bold;">body</span><span class="t16514" style="color: #0099ff;">></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16518" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">6</span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16521" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">7</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16522" style="background-color: #ffeedd;"><span class="t16514" style="color: #0099ff;"><</span><span class="t16515" style="color: #0066cc; font-weight: bold;">img</span> <span class="t16525" style="color: #009966;">height</span><span class="t16514" style="color: #0099ff;">=</span><span class="t16526" style="color: #009999;">"</span><span class="t16527" style="color: #669999;">125</span><span class="t16526" style="color: #009999;">"</span> <span class="t16525" style="color: #009966;">width</span><span class="t16514" style="color: #0099ff;">=</span><span class="t16526" style="color: #009999;">"</span><span class="t16527" style="color: #669999;">125</span><span class="t16526" style="color: #009999;">"</span> <span class="t16525" style="color: #009966;">alt</span><span class="t16514" style="color: #0099ff;">=</span><span class="t16526" style="color: #009999;">"</span><span class="t16527" style="color: #669999;">Flower</span><span class="t16526" style="color: #009999;">"</span> <span class="t16525" style="color: #009966;">src</span><span class="t16514" style="color: #0099ff;">=</span><span class="t16526" style="color: #009999;">"</span><span class="t16527" style="color: #669999;">flower01.jpg</span><span class="t16526" style="color: #009999;">"</span><span class="t16514" style="color: #0099ff;"> /</span><span class="t16514" style="color: #0099ff;">></span></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16518" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">8</span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16521" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">9</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16520" style="cursor: help;" title="Closes the 'body' tag. Point to <body> for more information."><span class="t16514" style="color: #0099ff;"><</span><span class="t16514" style="color: #0099ff;">/</span><span class="t16515" style="color: #0066cc; font-weight: bold;">body</span><span class="t16514" style="color: #0099ff;">></span></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16518" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">10</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16520" style="cursor: help;" title="Closes the 'html' tag. Point to <html> for more information."><span class="t16514" style="color: #0099ff;"><</span><span class="t16514" style="color: #0099ff;">/</span><span class="t16515" style="color: #0066cc; font-weight: bold;">html</span><span class="t16514" style="color: #0099ff;">></span></span></span><a class="t16517" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16530" style="clear: both;">
</div>
<div class="t16531" style="border-top-color: rgb(255, 204, 255); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 3px; text-align: right;">
<div class="hk15" style="float: left; padding-bottom: 3px; padding-right: 10px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;" target="_blank">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2c6ec865c39f9b98dcfb1a5234c97966.png" style="padding-right: 3px;" title=" Preview in a new window " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnSave" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_f2f1f551578a59a96ded2f333313cc9c.png" style="padding-right: 3px;" title=" Download the source code " type="image" width="20" /><input height="20" name="btnPrint" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_e27722655562e0af345b38956b90a080.png" style="padding-right: 3px;" title=" Printer friendly version " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=20&site=hk&url=minit%2Fpages%2Fimgtag1%2Ehtml&title=Example%3A%20Basic%20image%20tag" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2f9098bbfe98d43fef0a048f224153bb.png" style="padding-right: 3px;" title=" Email this page " type="image" width="20" /></form>
</div>
<div class="t16532" style="float: left; padding-bottom: 2px;">
<span class="t16523" style="cursor: default;" title="Areas highlighted with this color have the highest significance in this sample"><span class="t16524" style="background-color: #ffeedd; border: 1px solid rgb(238, 238, 238);">  </span> Focus #1</span>, Point to tags for details</div>
</div>
<div class="t16530" style="clear: both;">
<div class="hk16" style="border-top-color: rgb(0, 204, 153); border-top-style: solid; border-top-width: 1px; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 5px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="margin: 2px;">
</form>
</div>
</div>
</div>
</div>
<div class="hk8" style="clear: both;">
</div>
</div>
Congratulations! You now can display images on your web pages. But wait, there's more...</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
The Attributes</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
Inside your <img> tag we used the <a href="http://www.html-kit.com/e/go.cgi?u=http%3A%2F%2Fwww%2Ew3%2Eorg%2FTR%2Fhtml401%2Fstruct%2Fobjects%2Ehtml%23edef-IMG" style="background-color: transparent; color: #011a9b; text-decoration: none;" title=" External Link ">two required attributes</a>; <em>src</em> and <em>alt</em>.<br />
<em>src</em> tells the browser where the image is located. In our exercise the image and the web page are in the same folder so all we had to do was to type in the name of the image file and its extension, in this case <em>.jpg</em>. We'll talk more about the <em>src</em> attribute in a minute.<br />
The <em>alt</em> attribute stands for "alternative" and is the text that is displayed if the image isn't displayed for some reason, such as the <em>src</em> path is wrong or the user has their browsers image display turned off.<br />
<div class="s2" style="margin-left: 10px;">
<h3 style="color: #111111; font-family: Tahoma, Arial, serif; font-size: 16.6399993896484px; font-stretch: normal;">
<em>Width</em> and <em>Height</em></h3>
Two other important attributes are <em>width</em> and <em>height</em>.<br />
The main use of these attributes is to reserve space on the web page for the image(s) as the page is rendered, or loaded. Another use is to scale the image (adjust its visual size). Here's an example img tag using the width and height attributes:<br />
<img alt="flower01.jpg" border="0" height="100" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_ed96748605915d9e208e9dc047b2d4a3.jpg" style="float: right; margin-left: 2em;" width="150" /><code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><img src="flower01.jpg" alt="Yellow Flower" width="150" height="100"></code>Setting these values prevents the image(s) and other elements of the page (e.g. other images) from moving around all over the place while the page is being loaded. The browser "sees" these values and holds that much space on the screen while the page loads.<br />
Having stuff move around can be frustrating for a user. Imagine a user who may be trying to click a thumbnail image link and having to chase it around the page as the page is loading up.<br />
The above width and height settings tell the browser to display this image 150 pixels wide by 100 pixels tall, which in this case is the actual size of the image. However, you can change these values to something else to display the image at a different size. This is called scaling.<br />
Keep in mind that scaling images too much can cause image distortion. Meaning the quality of the image will be degraded. So pay attention to your results.<br />
<div class="n" style="background-color: #eeeeee; margin-left: 10px; padding-left: 1em; padding-right: 1em;">
It's important to understand that changing these values does <strong>not</strong> change the actual size of the image itself. It only sets the size (or dimensions) used in displaying the image.<br />
Let's explore this issue for a moment. Using a made up example let's say you have an image whose true actual size is 800px X 600px and whose file size is 1meg. You set the width and height attributes to 400px X 300px. Now, how large is the actual image now? 500K you say? No, it's true size is still 800px X 600px and 1meg. We did not change the actual file size, we only changed how it will show on the page.<br />
So why is this so important? Well think about it. Your wasting the users time and and your bandwidth. Why force a rather large file to download to only display it at a fraction of its true size? This could help eat up the bandwidth your web host has allotted you and it forces the end user to wait unnecessarily for the page to load.<br />
Oh, I know what you're thinking. It's only one image, so big deal. But wait! What if you scale the image to display thumbnail images as links. Now imagine if there were 10 of these on a page. The user would have to download 10 megs of pictures just to see a few small images! And what if the user has a dial up connection? Ouch!<br />
I suggest that you resize the image(s) to the size you want to display and create a second image for the thumbnail if necessary. I think it's ok to do some scaling but keep it reasonable, ok?<br />
So remember; Resize your images if necessary, create separate thumbnail images for links, and give them all a width and height!</div>
</div>
<div class="s2" style="margin-left: 10px;">
<h3 style="color: #111111; font-family: Tahoma, Arial, serif; font-size: 16.6399993896484px; font-stretch: normal;">
<em>SRC</em> - going a little deeper</h3>
What if your images are kept in a different folder than your web pages? In this case we still have to tell the browser where the file is by providing it with the path to the image file. We have two different methods we can use to accomplish this, we can use a <em>relative</em> path or the <em>absolute</em> path.<br />
Let's pretend you keep all of your web site related files under the folder MyWebFiles. And under MyWebFiles you have these two folders: <em>MyWebPages</em> that holds your HTML files and <em>MyImages</em> that holds all of your image files.<br />
<div class="s3" style="margin-left: 10px;">
<h3 style="color: #111111; font-family: Tahoma, Arial, serif; font-size: 16.6399993896484px; font-stretch: normal;">
Relative Path</h3>
"Relative path" means the file path to where the image is located "relative" to the HTML page. In other words you determine the path to the image with the HTML page as the starting point. Using our example folder structure mentioned above we would modify our <em>src</em> attribute so that our <img> tag looked like this:<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><img src="../MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125"></code>The "../" tells the browser to go up one folder from where the HTML page is located. Then it goes down the folder structure into the "MyImages" folder where our image file is located. If you need to go up two folders then use "../../" and so on.<br />
Let's say you had to go up <strong>two</strong> folders up from where your web pages are and had to go down several folders deep to get to your image. In this case your relative path would look something like this:<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;">"../../MyImages/Folder/Folder/flower.jpg"</code><div class="n" style="background-color: #eeeeee; margin-left: 10px; padding-left: 1em; padding-right: 1em;">
<strong>Pro:</strong> Easy to type in the path. It works on your local pc and on your web site (assuming you have the same folder structure in both places).<br />
<strong>Con:</strong> It won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file. It will no longer be located in the same<em>relative</em> position.</div>
</div>
<div class="s3" style="margin-left: 10px;">
<h3 style="color: #111111; font-family: Tahoma, Arial, serif; font-size: 16.6399993896484px; font-stretch: normal;">
Absolute Path</h3>
Absolute paths are a different than Relative paths in that it doesn't matter where the image files are located relative to your web pages. This is because you tell the browser exactly where the file is on the <em>web</em>.<br />
Let's say your web site is named "www.mysite.com" and you have two folders set up as we talked about earlier; <em>MyWebPages</em> and <em>MyImages</em>.<br />
To use the absolute path in your HTML page you would change your <em>src</em> attribute in your <img> tag to look like this:<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><img src="http://www.mysite.com/MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125"></code><div class="n" style="background-color: #eeeeee; margin-left: 10px; padding-left: 1em; padding-right: 1em;">
<strong>Pro:</strong> It doesn't matter where you move your HTML file, it will find your image file. Unless you move the image file of course.<br />
<strong>Con:</strong> If working with files on your computer you won't see the images unless you have a "live" internet connection (you're connected to the internet). This is because the browser won't be able to get to the image. Some people use a local file path (e.g. C:\folder1\folder2...) to get things to work on their local computer but forget to change this to the actual URL before uploading their page (e.g. http://www.mysite.com/folder1/folder2/...).</div>
</div>
</div>
</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
Images as links</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
When using images as links if you simply plop an image in as a link it will have a border around it by default.<br />
<img alt="flower01.jpg" border="0" height="125" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_ed96748605915d9e208e9dc047b2d4a3.jpg" style="border: 2px solid blue; float: right; margin-left: 2em;" width="125" />This is done on purpose to give the user a visual indication that it's a link. But sometimes this isn't desirable. To prevent the border from displaying use some Style. Styling is getting outside the scope of this article but since I brought it up I'll show you one of the most basic ways to do this.<br />
<div class="hk8" style="clear: both;">
</div>
<div>
 </div>
<div>
<div class="hk14" style="float: left; width: 205px;">
Place the following style declarations between the <head> and </head> tags of your web page (located near the top of your page) to remove the border.<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;">img {border: none;}</code><div>
 </div>
<img alt="flower01.jpg" border="0" height="125" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_ed96748605915d9e208e9dc047b2d4a3.jpg" style="border: none;" width="125" /></div>
<div class="hk13" style="float: right; width: 515px;">
<div class="t16547" style="border: 2px solid rgb(0, 204, 153);">
<div class="t16548" style="background-color: #eeffee; border-bottom-color: rgb(0, 204, 153); border-bottom-style: solid; border-bottom-width: 1px; padding: 3px;">
<strong>HTML : Image border</strong></div>
<div class="t16535" style="clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">1</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">html</span><span class="t16533" style="color: #0099ff;">></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">2</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">head</span><span class="t16533" style="color: #0099ff;">></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">3</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">title</span><span class="t16533" style="color: #0099ff;">></span><span class="t16538" style="color: #666666;">My page title</span><span class="t16539" style="cursor: help;" title="Closes the 'title' tag. Point to <title> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">title</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">4</span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">5</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">style</span> <span class="t16541" style="color: #009966;">type</span><span class="t16533" style="color: #0099ff;">=</span><span class="t16542" style="color: #009999;">"</span><span class="t16543" style="color: #669999;">text/css</span><span class="t16542" style="color: #009999;">"</span><span class="t16533" style="color: #0099ff;">></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">6</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">   <span class="t16544" style="background-color: #ffeedd;"><span class="t16538" style="color: #666666;">img {border: none;}</span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">7</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16539" style="cursor: help;" title="Closes the 'style' tag. Point to <style> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">style</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">8</span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">9</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16539" style="cursor: help;" title="Closes the 'head' tag. Point to <head> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">head</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">10</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">body</span><span class="t16533" style="color: #0099ff;">></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">11</span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">12</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">a</span> <span class="t16541" style="color: #009966;">href</span><span class="t16533" style="color: #0099ff;">=</span><span class="t16542" style="color: #009999;">"</span><span class="t16543" style="color: #669999;">page.html</span><span class="t16542" style="color: #009999;">"</span><span class="t16533" style="color: #0099ff;">></span><span class="t16533" style="color: #0099ff;"><</span><span class="t16534" style="color: #0066cc; font-weight: bold;">img</span> <span class="t16541" style="color: #009966;">alt</span><span class="t16533" style="color: #0099ff;">=</span><span class="t16542" style="color: #009999;">"</span><span class="t16543" style="color: #669999;">Flower</span><span class="t16542" style="color: #009999;">"</span> <span class="t16541" style="color: #009966;">src</span><span class="t16533" style="color: #0099ff;">=</span><span class="t16542" style="color: #009999;">"</span><span class="t16543" style="color: #669999;">flower01.jpg</span><span class="t16542" style="color: #009999;">"</span><span class="t16533" style="color: #0099ff;"> /</span><span class="t16533" style="color: #0099ff;">></span><span class="t16539" style="cursor: help;" title="Closes the 'a' tag. Point to <a> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">a</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">13</span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16537" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">14</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16539" style="cursor: help;" title="Closes the 'body' tag. Point to <body> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">body</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16540" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">15</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16539" style="cursor: help;" title="Closes the 'html' tag. Point to <html> for more information."><span class="t16533" style="color: #0099ff;"><</span><span class="t16533" style="color: #0099ff;">/</span><span class="t16534" style="color: #0066cc; font-weight: bold;">html</span><span class="t16533" style="color: #0099ff;">></span></span></span><a class="t16536" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16549" style="clear: both;">
</div>
<div class="t16550" style="border-top-color: rgb(255, 204, 255); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 3px; text-align: right;">
<div class="hk15" style="float: left; padding-bottom: 3px; padding-right: 10px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;" target="_blank">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2c6ec865c39f9b98dcfb1a5234c97966.png" style="padding-right: 3px;" title=" Preview in a new window " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnSave" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_f2f1f551578a59a96ded2f333313cc9c.png" style="padding-right: 3px;" title=" Download the source code " type="image" width="20" /><input height="20" name="btnPrint" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_e27722655562e0af345b38956b90a080.png" style="padding-right: 3px;" title=" Printer friendly version " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=20&site=hk&url=minit%2Fpages%2Fimgtag1%2Ehtml&title=Example%3A%20Image%20border" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2f9098bbfe98d43fef0a048f224153bb.png" style="padding-right: 3px;" title=" Email this page " type="image" width="20" /></form>
</div>
<div class="t16551" style="float: left; padding-bottom: 2px;">
<span class="t16545" style="cursor: default;" title="Areas highlighted with this color have the highest significance in this sample"><span class="t16546" style="background-color: #ffeedd; border: 1px solid rgb(238, 238, 238);">  </span> Focus #1</span>, Point to tags for details</div>
</div>
<div class="t16549" style="clear: both;">
<div class="hk16" style="border-top-color: rgb(0, 204, 153); border-top-style: solid; border-top-width: 1px; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 5px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="margin: 2px;">
</form>
</div>
</div>
</div>
</div>
<div class="hk8" style="clear: both;">
</div>
</div>
There is an old attribute called <em>border</em> that has been deprecated. This basically means it shouldn't be used anymore, so we'll just leave that one alone. You can <a href="http://www.html-kit.com/e/go.cgi?u=http%3A%2F%2Fwww%2Ew3%2Eorg%2FTR%2Fhtml4%2Fconform%2Ehtml" style="background-color: transparent; color: #011a9b; text-decoration: none;" title=" External Link ">read more about "deprecated"</a> on the W3C web site.</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
Inline</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
The <img> tag is an <em>inline</em> element. The differences between <a href="http://www.html-kit.com/e/go.cgi?u=http%3A%2F%2Fwww%2Ew3%2Eorg%2FTR%2Fhtml401%2Fstruct%2Fglobal%2Ehtml%23didx-block-level" style="background-color: transparent; color: #011a9b; text-decoration: none;" title=" External Link ">block</a> and <a href="http://www.html-kit.com/e/go.cgi?u=http%3A%2F%2Fwww%2Ew3%2Eorg%2FTR%2Fhtml401%2Fstruct%2Fglobal%2Ehtml%23didx-inline" style="background-color: transparent; color: #011a9b; text-decoration: none;" title=" External Link ">inline</a> elements is a different discussion, but to sum it up, inline elements are treated like text as far as how and where they are displayed in your document. The anchor tag (<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><a href= "http://www.mysite.com"><u>My Link</u></a></code>) is an example of an inline element. It is kept <em>inline</em> with text.<br />
So this means that you put your images where you want them to show up within in your documents text. Let's play around a little so we can see it in action.<br />
We'll use flower01.jpg again. Create a new HTML document and save it in the same folder you've been working in. You can name this file whatever you'd like. We'll be working between the <code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><body></code> and <code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"></body></code> tags again.<br />
Type this in your new HTML document (remember to keep this between the <code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><body></code> tags):<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><p>This is my image <img src="flower01.jpg" alt="Flower"></p></code><br />
Now click the Preview tab. Your page should look something like this:<br />
<div>
<div class="hk14" style="float: left; width: 205px;">
<img alt="screenshot02 (3K)" border="0" height="116" src="http://www.chami.com/html-kit/i/g/cached/tmp10_dup_e08f9f09f17d213c962b01c937e72861.jpg" width="200" /></div>
<div class="hk13" style="float: right; width: 515px;">
<div class="t16566" style="border: 2px solid rgb(0, 204, 153);">
<div class="t16567" style="background-color: #eeffee; border-bottom-color: rgb(0, 204, 153); border-bottom-style: solid; border-bottom-width: 1px; padding: 3px;">
<strong>HTML : Inline images</strong></div>
<div class="t16554" style="clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">1</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">html</span><span class="t16552" style="color: #0099ff;">></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">2</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">head</span><span class="t16552" style="color: #0099ff;">></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">3</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16557" style="color: #666666;"> </span><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">title</span><span class="t16552" style="color: #0099ff;">></span><span class="t16557" style="color: #666666;">My page title</span><span class="t16558" style="cursor: help;" title="Closes the 'title' tag. Point to <title> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">title</span><span class="t16552" style="color: #0099ff;">></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">4</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16558" style="cursor: help;" title="Closes the 'head' tag. Point to <head> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">head</span><span class="t16552" style="color: #0099ff;">></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">5</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">body</span><span class="t16552" style="color: #0099ff;">></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">6</span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">7</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16560" style="background-color: #ffeedd;"><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span><span class="t16557" style="color: #666666;">This is my image </span><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">img</span> <span class="t16563" style="color: #009966;">alt</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">Flower</span><span class="t16564" style="color: #009999;">"</span> <span class="t16563" style="color: #009966;">src</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">flower01.jpg</span><span class="t16564" style="color: #009999;">"</span><span class="t16552" style="color: #0099ff;"> /</span><span class="t16552" style="color: #0099ff;">></span><span class="t16558" style="cursor: help;" title="Closes the 'p' tag. Point to <p> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">8</span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">9</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16560" style="background-color: #ffeedd;"><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span><span class="t16557" style="color: #666666;">This is </span><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">img</span> <span class="t16563" style="color: #009966;">alt</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">Flower</span><span class="t16564" style="color: #009999;">"</span> <span class="t16563" style="color: #009966;">src</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">flower01.jpg</span><span class="t16564" style="color: #009999;">"</span><span class="t16552" style="color: #0099ff;"> /</span><span class="t16552" style="color: #0099ff;">></span><span class="t16557" style="color: #666666;"> my image</span><span class="t16558" style="cursor: help;" title="Closes the 'p' tag. Point to <p> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">10</span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">11</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;">  <span class="t16560" style="background-color: #ffeedd;"><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span><span class="t16552" style="color: #0099ff;"><</span><span class="t16553" style="color: #0066cc; font-weight: bold;">img</span> <span class="t16563" style="color: #009966;">alt</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">Flower</span><span class="t16564" style="color: #009999;">"</span> <span class="t16563" style="color: #009966;">src</span><span class="t16552" style="color: #0099ff;">=</span><span class="t16564" style="color: #009999;">"</span><span class="t16565" style="color: #669999;">flower01.jpg</span><span class="t16564" style="color: #009999;">"</span><span class="t16552" style="color: #0099ff;"> /</span><span class="t16552" style="color: #0099ff;">></span><span class="t16557" style="color: #666666;"> This is my image</span><span class="t16558" style="cursor: help;" title="Closes the 'p' tag. Point to <p> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">p</span><span class="t16552" style="color: #0099ff;">></span></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">12</span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16559" style="border-top-color: rgb(255, 204, 204); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">13</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"> <span class="t16558" style="cursor: help;" title="Closes the 'body' tag. Point to <body> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">body</span><span class="t16552" style="color: #0099ff;">></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16556" style="border-top-color: rgb(204, 204, 255); border-top-style: dotted; border-top-width: 1px; clear: both;">
<span style="border-right-color: rgb(221, 238, 221); border-right-style: solid; border-right-width: 1px; color: #cccccc; display: block; float: left; margin-left: 5px; padding: 1px 5px; text-align: right; width: 2em;">14</span><span style="display: block; float: left; padding-bottom: 1px; padding-left: 5px; padding-top: 1px;"><span class="t16558" style="cursor: help;" title="Closes the 'html' tag. Point to <html> for more information."><span class="t16552" style="color: #0099ff;"><</span><span class="t16552" style="color: #0099ff;">/</span><span class="t16553" style="color: #0066cc; font-weight: bold;">html</span><span class="t16552" style="color: #0099ff;">></span></span></span><a class="t16555" href="http://www.chami.com/html-kit/minit/pages/imgtag1.html#" style="background-color: transparent; color: #011a9b; cursor: default; display: block; padding-bottom: 1px; padding-top: 1px; text-align: right; text-decoration: none;"> </a></div>
<div class="t16568" style="clear: both;">
</div>
<div class="t16569" style="border-top-color: rgb(255, 204, 255); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 3px; text-align: right;">
<div class="hk15" style="float: left; padding-bottom: 3px; padding-right: 10px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;" target="_blank">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2c6ec865c39f9b98dcfb1a5234c97966.png" style="padding-right: 3px;" title=" Preview in a new window " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnSave" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_f2f1f551578a59a96ded2f333313cc9c.png" style="padding-right: 3px;" title=" Download the source code " type="image" width="20" /><input height="20" name="btnPrint" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_e27722655562e0af345b38956b90a080.png" style="padding-right: 3px;" title=" Printer friendly version " type="image" width="20" /></form>
<form action="http://www.html-kit.com/e/view.cgi?i=20&site=hk&url=minit%2Fpages%2Fimgtag1%2Ehtml&title=Example%3A%20Inline%20images" method="post" style="display: inline; margin: 0px;">
<input height="20" name="btnPreview" src="http://www.chami.com/html-kit/i/g/cached/tmp10_ico_2f9098bbfe98d43fef0a048f224153bb.png" style="padding-right: 3px;" title=" Email this page " type="image" width="20" /></form>
</div>
<div class="t16570" style="float: left; padding-bottom: 2px;">
<span class="t16561" style="cursor: default;" title="Areas highlighted with this color have the highest significance in this sample"><span class="t16562" style="background-color: #ffeedd; border: 1px solid rgb(238, 238, 238);">  </span> Focus #1</span>, Point to tags for details</div>
</div>
<div class="t16568" style="clear: both;">
<div class="hk16" style="border-top-color: rgb(0, 204, 153); border-top-style: solid; border-top-width: 1px; font-family: Tahoma, Arial, serif; font-size: 10.8800001144409px; font-stretch: normal; padding: 5px;">
<form action="http://www.html-kit.com/e/view.cgi?i=30" method="post" style="margin: 2px;">
</form>
</div>
</div>
</div>
</div>
<div class="hk8" style="clear: both;">
</div>
</div>
Now let's go back and change things a little. Click on the Editor tab and try these different combinations to see where the image shows up:<br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><p>This is <img src="flower01.jpg" alt="Flower"> my image</p></code><br />
<code style="color: #cc6633; font-family: Tahoma, Arial, Verdana, Helvetica, Arial, sans-serif; font-size: 16.6399993896484px; font-stretch: normal;"><p><img src="flower01.jpg" alt="Flower"> This is my image</p></code><br />
Now, add in a lot more text and move the image around inside the text so you can see how the image displays.<br />
There are many ways to control how and where images are displayed on your web page. One of the most common is using Style. We're not going to get into all of that here but I do want you to know you have options available to you.</div>
<h2 style="background-color: white; font-family: Verdana, Arial, Tahoma, serif; font-size: 17.9200000762939px; font-stretch: normal;">
Closing comments</h2>
<div class="s1" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.8000001907349px; margin-left: 9px;">
We've only covered the basics here regarding the <img> tag. Once you feel you've got a handle on these basics I would encourage you to spend some time learning the rest of what's available. I've provided some links below for you to explore. But don't forget that you can use your favorite internet search engine to find lots more.<br />
Many thanks go out to the people in the HTML-Kit community for their assistance in offering suggestions for improvements to this article.</div>
<br />
<br />
<br />
<br /></div>
<div>
READ MORE:</div>
<div>
http://www.pagetutor.com/html_tutor/missing.html<br />
http://www.udel.edu/CIS/103/pconrad/07F/labs/lab03.html</div>
<div>
http://www.chami.com/html-kit/minit/pages/imgtag1.html</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>

WHERE ARE MY IMAGES?

Where are my images? Dear Joe, <----- I made my page but my images aren't showing up. All I see are little red X's (or blan...

IMAGE SRC PATH COUNT

WHERE ARE MY IMAGES?