Janet Schlarbaum Graphic Links

Posted on June 27th, 2009 by Janet Schlarbaum

How to Add a Graphic and Link to a Web Page

Janet Schlarbaum Graphic Links Author: Sensei J. Richard Kirkham B.Sc.

Adding a graphic to a web page is fairly easy especially with WYSIWYG editors. Several people however have asked me about creating a hyperlink. This way visitors to your web page can click the graphic and get to the target web page….

What is a Graphic?

For you total newbies (not a bad thing we were all there at one time) a graphic is a picture used in advertising and web pages. The old adage a picture’s worth 1000 words isn’t any less true today than when it was first said. Graphics not only convey more information for both explanations and results, they keep your prospects’ attention and help them to continue to read your web page.

How Do I Add a Graphic to My Web Page?

Let’s assume (yes I know) your web page is on your hard drive. Okay if you’re a total newbie I mean let’s assume it’s on your computer. If it’s not open up your web page editor on your web server in html code mode so you see what may appear to you as a bunch of gibberish. WYSIWYG (What You See Is What You Get) editors can add hyperlinks using a menu driven interface, but that would defeat the purpose of learning how to do this so you can move past any confines the editor may have.

Here’s How to Open Your HTML File With Notepad

Find your local web page on your computer

PC users right mouse click on your local web page

Left mouse click on Open with

Left mouse click on Notepad

If your successful there’s that gibberish I discussed with you earlier.

Find some text you recognize. Just concentrate. If this slightly ADHD boy can do it so can you.

Now, for the purposes of this article ( will actually be < . If I don’t do it that way this web page will think I’m adding a graphic or hyperlink. If you want your graphic to be on a line on its own add (br) (remember what I said) before and after your graphic code or (p) then (/p) afterwards.. Now add this code (BR)(IMG SRC=”YourGraphicWithNoSpaces.jpg” ALIGN=LEFT WIDTH=200 HEIGHT=200)(BR)

The width and height part the graphic are not necessary if you’re going to use the actual size of the graphic. Caution is advised here. Changing the width and height of a graphic doesn’t decrease the load time. The graphic is still technically the same size.

What is a Hyperlink?

A hyperlink is the term used when a web page offers a link to another web page or download. Most hyperlinks are traditionally blue and underlined. You can tell when text or a graphic is hyperlinked by placing your mouse over it. The mouse cursor changes from an arrow to a finger. In most cases, if you look at the bottom of your web page you can see the web page or download to which the hyperlink is targeted. When you left mouse click on it, your browser is directed to that web page or the download begins.

Why Do I Need to Learn to Make Hyperlinks

Hyperlinks are how your visitors will navigate your web site including clicking on your order link if you have a sales page. Unless you have a single informational web page, you need hyperlinks in order for your visitors to go anywhere else on your web site.

Okay, How Do I Make a Hyperlink in a Graphic for Another Web Page

Let’s assume (yes I know) once again your web page is on your hard drive. If it’s not open up your web page editor on your web server in html code mode so you see what may appear to you as a bunch of gibberish. WYSIWYG (What You See Is What You Get) editors can add hyperlinks using a menu driven interface, but that would defeat the purpose of learning how to do this so you can move past any confines the editor may have.

Here’s How to Open Your HTML File With Notepad

Find your local web page on your computer

PC users right mouse click on your local web page

Left mouse click on Open with

Left mouse click on Notepad

If your successful there’s that gibberish you saw earlier.

Okay, The Web Page is Open. I See The Gibberish What Now?

Now remember, for the purposes of this article ( will actually be < . If I don’t do it that way this web page will think I’m adding a hyperlink and graphic and you won’t be able to see the code.

Find the graphic you made earlier and alter to code to this

(BR)(A HREF=”UrlLinkVisitorsGoWhenTheyClickYourGraphic”)(IMG SRC=”YourGraphicWithNoSpaces.jpg” WIDTH=75 HEIGHT=38)(/A)(br)

This code is what hyperlinked your graphic (a onClick=”javascript:pageTracker._trackPageview(‘/outgoing/article_exit_link’);” href=”TheWebPageAddress”)My graphic (/a) (/a) is what anchors the graphic or text the the hyperlink

That’s it! Save your work and open your web page. Find your new hyperlinked graphic you placed and click on it. The web page you linked to replaced your present one!

That’s Great Rick! Now How Do I Make The Hyperlink Open a New Browser Window So My Old Page Stays Open As Well?

I can still remember asking that very question many years ago.

Remember the previous html code I taught you? Go back if you need to. Now add one more thing to it

(BR)(A HREF=”UrlLinkVisitorsGoWhenTheyClickYourGraphic” target = “_blank” )(IMG SRC=”YourGraphicWithNoSpaces.jpg” WIDTH=75 HEIGHT=38)(/A)(br) target = “_blank” is what opens the new browser window. Actually it doesn’t have to say _blank. It could say anything that is not an actual internal name on your target page. Never mind about that part. If you were ready for that you wouldn’t be reading this article. Suffice to say you could replace _blank with about anything you like.

Conclusion

Yes you can hire someone to design a web page for you and to make it look professional it’s not a bad idea especially if you felt a need to read this article, but as both a businessman and teacher, I have to ask you, don’t you think you should eventually learn everything you can about your own business?