Learn HTML -        

Lesson 2 - Adding Images to your webpage.

Use Notepad or NVu or any other editor that you choose.

The html tag to insert an image is <img> which is a non-paired tag. It has no ending tag.

To insert the image you must tell the browser the name of the image file and where it is located.

Notepad: if you are using notepad to write the page type this code:

<img src="https://www.sfimg.com/Images/Banners/Banner124.gif"> and it will be added at the place where you enter that statement in the html code. It will look like this:

 

Note:
The image is linked, so clicking on it will open another window and webpage.

 

When the browser can't find the image

The image can be on another website as the one above is or it can be in the same folder that the html file is located whether that is on a webserver or on your own computer. If the image file is in the same folder as the html file, then you just need to give the filename such as: <img src="Banner124.gif"> but in this case, if we use that coding, we get the "box with the red x" image below:

      What that tells us is that the browser is trying to display an image, but has some bad information in the filename or location of the image file. You will probably get some of these in your pages.

 

here is another example of some code to insert an image:

<align="left"> will put it on the left of the page. but since the code is after the text above, the image moves down and then to the left.

 

 

 

 

<align="right"> will push it to the right edge of the page.

 

 

but if there is not enough space to place it to the right of the text it will be moved down the page and then displayed on the right side.

You can make it position in the center by placing the img tag inside a paragraph tag written like this in the code:
<p align=center><img src="https://www.sfimg.com/Images/Banners/Banner124.gif"></p>

The best way to learn is to experiment with images of varying size and placing them in different positons with different alignments and then resizing the browser to see how they may appear at different browser sizes which different users might have.

 

Using NVu, yet???-   Adding an image to a webpage using NVu

If you are using NVu, click the Image icon on the toolbar. This will open a window with a text box into which you type only this: https://www.sfimg.com/Images/Banners/Banner124.gif

You will notice in a few seconds, that a small image appears in the that Image Properties window that was opened. This will indicate that the filename and location are correct because NVu has already located it. That will help you avoid the little box with the red X.

NVu will also help you give the browser the size of the image to help it load the image faster. It will also help you use the image as the clickable object for a user to click to be taken to another page or location within a page.

If you are using NVu now, you are seeing why I think you should start using a wysiwyg html editor as soon as possible. It just makes things easier!

Sure, you should understand a little about how the html code is written. This will help you work out problems if they occur.

But I think that from this point forward you should use a wysiwyg html editor. NVu is the best free one, I believe. My favorite is Microsoft FrontPage 2003. I know that FrontPage gets a lot of bad press, but it serves me very well and I would not like to do without it.  

Images Change the way things are positioned on a page

You will soon learn that placing an image on a page changes things. First the browser can not be resized any smaller that the image width and still have the image display. That is, the image will not shrink in size or be pushed downward as you can see happening to text.

Try it NOW. Grab the side of the browser and make it smaller and watch the text being reposition on the page and moved down as needed to continue displaying it.

Notice, too that the image can be moved down the page by the text that appears before the image moving down.

Dealing with the relative positioning of text and images that are combined on the same webpage might be one of the first complications of writing your website.

1. Images are normally aligned at the left of the page.

2. They can be nested in a paragraph tag and positioned according to the alignment of the paragraph.

3. Images can be used instead of text to create a hyperlink. A user clicks an image and is taken to your next page or wherever you want them to go.

4. Images take longer to download and have appear than does text. So adding more images will slow down the total time to display the page. If load time gets to long, visitors can get tired of waiting and leave before they see the page.

and here is a hyperlink to the Next Lesson about Hyperlinks