I like to write posts that can help others complete a task, whether it is with computers, web sites/blogs, networking, or digital photos. Some times, I come across questions that get asked on a frequent basis. While the questions may seem to be simple to answer for some, I also realize that many people don’t have the technical knowledge others may have acquired through the years.
This post is going to talk about creating header images for a web site or blog, and how to make them link back to a home page. If you are new to HTML, creating such an image is very easy to do.
Create the Image
Before you can create a clickable image that links to a home page, you first need to have an image. When creating the image, you will need to also know how big the image needs to be.
If you have downloaded a template with a placeholder-type image, you can just view the properties of the image to see how large you image needs to be. The HTML code may have the image size, or you may need to download the image and then view the properties in Windows.
Once you know the image dimensions, you can construct the new header image. You will need an image editor to create the image. In my last post titled Photo and Image Editors, I discussed several image editors that you can use to create or edit images.
Use the following steps to create an image:
- Start your image editor.
- Create a new image (usually click File->New) and then specify the size of the image. The size should match the dimensions of the image in your template if you are using one.
- Once your image has been created, save it in either a GIF, JPEG, or PNG format. If your image doesn’t have many colours (<256), try using the GIF or PNG-8 format. For more colours, try the JPEG or PNG-24 format. Save it in a directory on your host, or if you are building your site on your local machine first, save it to a subdirectory within your web site directory.
When I store images for my web sites, I usually store them in an image or images subdirectory to keep my web site directories clean and organized. I then reference the full URL to that directory when using the images. For example, if my web site URL was somewebsite.com, and the image header.jpg was stored in the image subdirectory, the full URL would be: http://www.somewebsite.com/image/header.jpg.
Now that you have a header image let’s look at it adding to your pages and make it clickable so your visitors would return to your home page.
Making an Image Clickable on a Web Site
Creating a clickable image is easy to do and is very similar to creating a hyperlink. All you need to do is use the following HTML code:
Using the example from above, the HTML code will look like:
It is important to note that you should also include the height and width properties of the image in the HTML.
As you can see, creating a clickable image is simply a matter of creating a standard hyperlink, but instead of specifying text, you include an image.