Using Pictures to Link, Adventures in HTML

Most of us have already included basic links on our pages—for the search bar, and other parts of the page.  One thing, however, that adds an interesting element to the website is using images as a links.  I didn’t think it’d be too difficult to do this, so I looked into it.  Turns out, it’s pretty straightforward.


Start with the basic image code:


<img src=”WEB/PICTURES/WEIRDPHOTO.jpg” align=”MIDDLE” width=”250″ height=”320″/>


Then, all you have to do is add the location where you want the photo to link to!


Use this before the image code:


<a href=”GALLERY.html”>


And this after the image code:





After learning how to code this, the two elements being melded together makes complete sense.  The full code is:


<a href=”GALLERY.html”><img src=”WEB/PICTURES/WEIRDPHOTO.jpg” align=”MIDDLE” width=”250″ height=”320″ /></a>


But thinking about it as if I’m learning a new language, I feel like something clicked and I am beginning (key word: beginning) to understand how the elements work together. 


This technique can be helpful for using thumbnail images in a gallery, or having a more interesting look when linking to different parts of your site.  Overall, I’d say it’s one of the more beneficial stylistic aspects I’ve learned thus far throughout my adventures in HTML. 

~ by meh109 on February 4, 2013.

%d bloggers like this: