And I normally hate puns. Anger is a fantastic motivator though, so I’m hate-learning all this HTML as fast as possible while still trying to remember everything. Without caffeine to boot! College Kyle would be terrified.
The <img> tag is used to add images to a website. It’s empty, which once again means that it has no closing tag. There are some important attributes for this:
src is the source of the file
alt is the alternate text displayed if for some reason the picture listed in the source can’t be displayed, like if you messed up the location url, or if the picture is no longer there, or if you’re using a site reader.
width and height specify the width and height of the image, obviously. By default, the values for these are in pixels. It’s good practice to specify both a width and a height, as this will reserve a space on the page for it when the page is still loading. If you set neither, it will display the images actual size, the browser won’t know the size of the image until it loads it, so the page layout will change while it’s loading.
title is different than the alt field. It displays text as a tool tip when you hover over the image. The most common use I’ve actually seen for this is for webcomics, like my personal favorite Girls With Slingshots, so the creator can put an extra comment or joke in there.
Example time:
<img src=”http://3.bp.blogspot.com/-yRVOMTYkQQA/T-PxEL5icHI/AAAAAAAAKrw/Iz795NdbjS0/s1600/IMG_9430.jpg” title=”look at dem houses” alt=”nerja” width=”250″ height=”250″>
They recommend being careful with how may images you use. Each time you load the page, the browser has to pull the image from the web server where it’s hosted and place it into the web page, which can slow down how quickly the page loads.
If you use the float property for the style attribute in the img tag, and then put that <img> element inside of a <p> element you can set the image to sit to the left or to the right of the text. Code and example shown below. It’s worth noting, I put a semicolon at the end of the property:value pair for the style attribute, but they didn’t in the example I looked at. I’m curious as to whether or not that’s required now.
<p><img src=”http://rack.2.mshcdn.com/media/ZgkyMDE0LzAzLzMxL2UxL2VpZmZlbHRvd2VyLjYwMmIyLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/fe683380/ba4/eiffeltower.jpg” alt=”eiffel tower” title=”big ol tower” width=”70″ height=”50″>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
It’s easy to make a link out of an image, simply put a <a> element around your <img> one:
<a href=”http://google.com”><img src=”myimage.gif”></a>
Now, there was an tutorial on making a client-side image map, where a picture of the sun and some planets responded to where you clicked and took you to different links. This is awesome, but a bit too advanced for me right now. I’ll add it to my list of advanced things to come back to.
Kyle's Awesome Awful Websites 
