Tutorial Tuesday

Tutorial by SewHappyGeek: HTML email me button EXPLAINED

PhotobucketI 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

6 thoughts on “Tutorial by SewHappyGeek: HTML email me button EXPLAINED

  1. I can't thank you enough for this. I am hopeless with this sort of thing, and you have made it sound easy. I will be playing with this very soon. I'm a new follower. Have a great day!

  2. Thanks Jenna! Great tute!

    Re the Tramadol, I am going to ask for a go of it! I have heard they might be good!

  3. I hate to break it to you, but the mailto command is actually quite antiquated in a modern internet where most people are using a web-based e-mail service. The mailto command is nice in as far as it automatically puts the address you listed into the address line of the message, however, that only works if the person is using a client-based program like Outlook Express.

    I, and many others, happen to not have such a program. You see, I’ve experienced the death of a hard drive, which meant that all of the messages and contact info stored in programs on my computer were lost. I now use two different web-based e-mail services, and forward the mail I send and receive to my second account. I want be sure that my records will not easily disappear into a puff of technological smoke.

    The point is that while a cute contact button like that might be tempting, they are not really all that useful for most people. A good old line of text, that can be copied and pasted as fast as you can hit “CTRL C” and “CTRL V” is much more universally appealing.

    That being said, buttons are handy for directing people to different pages within your website, and beyond, while spicing up the look of your site. So, don’t under estimate the usefulness of this skill.

  4. Well, luckily enough, Jenna, you included your email address on your button. I wish your ardent admirer above had told you how to use it for web based emails, too. Is that not possible?

Leave a Reply

Your email address will not be published. Required fields are marked *