9 Handy HTML tips for bloggers

I sort of despise technology. Which is ironic, given that I've spent the best part of my adult life writing about technology in one form or another.

My problem is an innate lack of technical ability combined with a constitutional inability to give up on anything until I've worked out how to do it. It's probably an ego thing.

Anyway, I've worked out a few HTML tricks over the past year, all of which I've used on blogs successfully. On the basis other people might find them useful I'll share them here. Feel free to add your own HTML wisdom in the comments!

  1. To create a link. If you want to create a link in basic text on your website, the HTML code is dead simple. Just copy/paste this text: <a href =”http://www.yourlinkhere.com”> Text </a>. The first web address should be the page you want to link to, and the ‘text’ part is the word you want to make into a link.
  2. Create bold or italic text. This is fairly simply achieved by adding certain tags around the text you want to change. For bold text you can either use <b>text<b/> or <strong>text</strong>. For italics, try <i>text</i> or <em>text</em>
  3. Create underlined text using a similar technique, by adding these tags around your desired text <p style = “text-decoration: underline”>text you want to underline</p>
  4. Want to force a link to open in a new browser window? Simply add target = “blank” to your link code, so it looks like this: <a href =”http:www.yourlinkhere.com” target=”_blank”> Text</a>
  5. To add an image. The basic HTML to insert an image into a blog post is as follows: <img src = “image.jpg”> The img src simply means ‘image source’. Often the name of the image will actually need to be a URL because the image is hosted, either within your blog, or on another website or server.  In this case, the URL needs to go inside the quotation marks. Not sure of the URL? Right click on the image and look at the properties, which will give you a location URL.
  6. Make a simple email link. An email link is similar to a hyperlink but you replace the http:// part of the code with mailto:  and then replace the URL with an email address. So a simple email link might look like this: <a href = “mailto:you@domain.com”>email me!</a>
  7. Making a slightly fancier email link is simple. For example, you might want to define what should appear in the subject line of the email when someone emails you via your website. In that case, you would use this code: <a href="mailto:you@domain.com?subject=About Your Blog">email me!</a> This will generate an email to your specified address with the subject line ‘about your blog’.
  8. Make an image into a clickable link. You might want to do this if you want your blog header to link to your home page, or to create a simple blog badge. The basic code looks like this: <a href="http://www.placeIwanttolinkto.com"><img src="http://www.URLofmyimage.com"</a>
  9. Create a simple ‘Contact Me’ form on your site. This is a big issue for me, as you can use commercial services and widgets for contact me forms, but they’re often unreliable, or cost money. If you want a very simple contact me form on your site or blog, then copy/paste this code, ensuring to insert your email address in the relevant spot, and also deciding what words you want to use for the various sections of the form – this code will generate a form with a space for someone's name, their comment, and a 'submit' button which will send the contents to you as an email:

<FORM action="mailto:me@domain.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

About 

Sally is a full-time blogger and founder of the Tots100, Trips100, Foodies100 and HIBS100 communities, along with the MAD Blog Awards. She spends a bit too much time on the Internet. She’s also a very happy Mum to Flea, the world’s coolest ten year old.

6 Comments

  1. Robyn Slingsby
    5th August 2010 / 10:39 am

    Soooooo helpful, thank you! :0)

  2. 5th August 2010 / 3:02 pm

    Thanks, creating the link is really useful, as is forcing link to open in new browser window. I’ve just started a new blog, having first blogged a few years ago, but never got v brave with the tech side. You make it sound so simple.

  3. 5th August 2010 / 5:27 pm

    Argh! I’ve just blogged about this and I’m still confused. I got the first few but the one about a clickable link (#8)?
    So in Blogger, suppose I created an image in photoshop to put on my page, where does the html thing go?
    Gah. I can’t believe how thick I am.

  4. 5th August 2010 / 9:09 pm

    Really helpful! Does that mean I can now ask you instead of daddacool? The independence that would give me! lol

  5. 6th August 2010 / 11:00 pm

    hi, Thanks for this – the contact me one… I always wanted to know how to add one of these and now I can but one thing I seem to get a ” coming up in comment space – any ideas why as I am a bit unsure on html
    Thanks
    BNMx

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.