Tutorial by SewHappyGeek: HTML email me button EXPLAINED

I think I've mentioned that I'm trying to teach myself HTML and am currently taking a web design class. So, today's tutorial teaches you some simple HTML so you can create an 'Email Me' button for your blog, and since you'll be learning the HTML you can figure out what's wrong if yours doesn't work.
Ok, the first thing you need to do is design your button.  I use Piknik.com to crop photos and in the 'create' function you can add text. Then, after I save them on my computer, I go to Photobucket, and upload my button/photo.
Instead of just telling you how to copy and paste your own stuff into an html template, I'm going to explain how the html works, so that it's not all scary, and you can fix it if you need to.
Here's mine:
<a href="mailto:jennaexcell@gmail.com"><img src="http://i1197.photobucket.com/albums/aa424/sewhappygeek/emailbuttonblogv2-1.jpg"/></a>

1.Let's deal with it one step at a time: the first thing is this:  <a href="
< means: 'beginning of html'
a means it's an anchor for a hypertext link - in this case, an email address - <a> means the html command to the browser is starting, </a> means it's finished with the anchor html command.
href= is denoting the link/url itself - your email address. Think of it like this: a handy reference=
" tells the browser that what's in those quotation marks are what you want your a href= to go to and what to do. So to tell your browser you want it to link to another link, begin it with <a href="
2. mailto:youraddress@whatever.com"> tells the browser what to do - mail to an email address - and the " denotes the end of the email address, and the > says, Ok, that bit's done, let's move on.
3. <img src= ok, this is where it gets odd.  When you have a picture, or a button on your blog, the picture isn't really there - it's a reference to the place where the picture/button is stored. In this case it's stored at Photobucket. I think of <img src= as 'image source'. (and once again you're capping the ends with < and /> which tells the browser that what's inside < and /> all goes together)
So, below your lovely picture/button thingy on Photobucket there are a number of references that you click on and copy. You want the direct link.  So copy and paste it, making sure that after your .jpg, it ends with "/> which means, hey browser, this marks the end of my image source code!
4. Now all you need is to tell the browser it's the end of your a (anchor) element - do that with </a>
the / tells the browser it's the end of that html element/command! (that's the job / does in html)
5. So now, here's my html again, with directions for you to copy and paste your own information- but now, you'll know what you're doing and why you're doing it:


<a href="mailto:youremail@gmail.com"><img src="http://i1197.photobucket.com/albums/aa424/sewhappygeek/emailbuttonblogv2-1.jpg"/></a>

Replace the red with your email address
Replace the blue with your direct link from Photobucket

I'm definitely not an expert of html, but I hope this helps a little bit.  If you want to really play with html but don't want to buy anything, try NVU Web Authoring Free Software which is what we're using in my course. And if you have any questions, email me at jennaexcell (at) gmail.com.
Click here to get to this week's Linky Party - I think I set it to stay open till midnight GMT Thursday.
See you tomorrow!

© Copyright J C Excell, 2011
All rights reserved