Adding Images and Hyperlinking with HTML

Hey guys!

Continuing with the website stuff, I’ve been working mostly on getting all the things I’ve done for class so far on my site. This includes pictures. I also thought it would be cool if my main page had images that linked to the next page. Here are the steps to adding an image and making it a hyperlink to a new HTML page.

First, if you haven’t already,  go up to File- New and create a new blank HTML page. This will be the page you want to link to. The first one I made was for my PostSecret creations. I called it postsecret.html.

The second thing I did was I added a bit of content on that page and I linked it to my external CSS sheet, just to make sure that when I clicked the link later on, I’d be able to tell if I had it working.

After getting that set up, it’s time to begin creating a link. If your hyperlink is going to be an image, you’ll need to add the image to your page first. Click in the <div> you want the image in and go up to Insert-Image (You can also do this with the Image icon in the upper right toolbar). It will bring up a dialogue box asking you where you want to pull the image from. Find the image on your hard drive and hit “choose.”

You will get a dialogue box that pops up, asking you if you would like to copy that image to your site folder. Say yes. The next box that pops up is asking you to add descriptive tags, for the computer to identify what that item is. You can add these if you like.

After that, you’ll see a line appear in your HTML that looks like this:

<img src=”postsecret1.jpg” width=”300″ height=”225″ />

Your image has been added! Now it’s time to link it to our other HTML page. Highlight the text that was inserted in your HTML document. (In my case, I’d highlight the text that appears above.) You can go back to Insert-Hyperlink or go to the Link icon in the upper middle toolbar. You’ll get yet another dialogue box.

In the first blank slot, it will have the text you copied.

The second box is the page it is linking to. If you hit the folder icon next to it, you can choose your newly-saved HTML file. This is the page you want the link to take you to.

The third thing is the “target” field. I chose “_blank” for some links because that means it will open in a new window and leave your page open behind it. If you don’t put anything in this field, it will simply take the viewer away from the current page and into the linked one. I did that for most of my internal hyperlinks.

Once you hit okay, the image is now also a link! Pretty cool.

Let me know if you have any additions or changes.

-Abby Vanim

~ by avanim on January 26, 2010.

%d bloggers like this: