Hello Nairalanders, am just learning HTML , have downloaded books on CSS and HTML for my tutorials. My major problem now is how to insert or wrap an image into my web page. I don't seem to understand what the books are pointing at, as have followed all due processes still no effect. My question is , must I be connected online or the directory to the image link should be on a server cos am already confused. Been staring at the screen for quite some hours now and I don't want to get frustrated. Pls I need your help @seun if possible Front page for more coverage.
Thanks

In order to insert image in your web page through html document you will have to use the image tag to call the image. Now there are few things you need to understand before the image shows. The easiest thing to do is to make sure the image you want is in the same root folder with your html file. For a cleaner work, you may have to create a folder anywhere in your computer. And inside that folder, you will save your html document, your css document and your images.

Now, if your image is just directly in that main folder, then you will call it in your html like this:

<img src="myImage.jpg"/>

You will have to find out the format of the image. If it's in png, it will not show if you call it as jpg.

<img src="myImage.jpg"/>
<img src="myImage.png"/>
<img src="myImage.gif"/>

You will also make sure that the image name you wrote in your html document matches the actual name of the image in your root folder.

However, if your image is in a folder inside the main folder, then you will have to reference that folder in your html. Let's assume that you have your image inside a folder called images, then your markup will look like this:

<img src="images/myImage.jpg"/>

Check the attached images to see how the architecture of the two scenarios will look like.

If you have more questions, don`t hesitate to ask us.

Thnks a lot you just saved a frustrated fellow,tried it and it worked... Will get back to you when I encounter more difficulty. Thanks once again

Another option would be to use the fully qualified path name of the image wherever it is located on your computer or even the internet. Using this pattern would call the picture from wherever it is located on your local computer and if it is the internet you would need an internet connection. Example code below would pick the picture out from the desktop;

<img src= "C:\Users\java_servlets\Desktop\myImage" />

If you are developing with a local server then you copy the picture into the appropriate folder on the local server, then access the picture with localhost followed by the relevant path. Example below accesses the picture from a glassfish server bundled with netbeans

<img src= "http://localhost:8080/ems_app/image1.jpg" />


I hope this further complimented the relevant info posted by Talk2bryant. Send in more questions if you have any.