Learning HTML: 4 of 6

Graphics and Backgrounds


In order to include a graphic on a page you should use the following code:
<img src="graphic.gif">
This assumes the graphic is in the same directory as the file including the graphic.
In order to use a graphic as a background image, or color the use the following code:
<body background="graphic.gif">
The background graphic will be replicated, as a background, throughout the document.

If you are using a graphics file that is not in the same directory, then you can use its full web address, but it is better to host graphics locally if possible. If the graphics are in a seperate directory, then review "File names and paths" below.

Graphic files on WWW must be either .gif or .jpg files.

The Free Graphics site is a good source for images for a web page.

Link to


In order to link to a part of a document then you can use the following code:
<A HREF="#gosomewhere">Go Somewhere</A>
This will move the browser to a statement with the following code:
<A NAME="gosomewhere">This </A> is where I want the browser to go

File names and paths


You should be familiar with the look of an html file name and path within a hotlink. The following is typical:
<A HREF="http://www.somecompany.com/somedirectory/somesubdirectory/somefile.html">Lets go to the resource</A>
You may also have seen the following, if not, look at the view source of most documents to see it:
<A HREF="somefile.html">Lets go to the resource</A>
These URLs would access the same resource assuming that the second hot link is from a file in the same directory, or same subdirectory. In this instance, the page with the link in it must be in the subdirectory "somesubdirectory".
You may also have seen the use of "../" as follows:
<A HREF="../somefile1.html">Lets go to another resource</A>
In this instance, the file somefile1.html is in the directory one level higher than the current file. Thus the somefile1.html file is in the somedirectory directory, whereas the page linking to it is in the somesubdirectory directory.

Now go to Learn HTML: Part 5