F Basic HTML For Bloggers - Babi a Fi

Basic HTML For Bloggers

Basic HTML for Bloggers

Everything is so automated these days it can seem like you have no reason to learn any HTML. Blogger, Wordpress and all the other platforms have nice clean interfaces for uploading pictures, formatting your text, and anything else you might want to do in your day-to-day blogging. But sometimes they're not working, or perhaps they just seem to be messing up for no apparent reason. That's when a little HTML comes in handy.


What is HTML?


HTML stands for HyperText Markup Language, which is the standard markup language for creating web pages. As Wikipedia puts it: web browsers use HTML to interpret and compose text, images, and other material into visual or audible web pages.

It started life way back in 1989 when Tim Berners Lee, computer scientist extraordinaire, had the idea of conjoining hypertext and the internet. The result was the World Wide Web! HTML is still constantly evolving; we're currently on the fifth version of the language, HTML5.


How does HTML work?


HTML uses tags to create elements, which come together to form a document.

Or, to put it another way, HTML uses commands written in angle brackets to create an individual component of a web page. Put together, these components will form a - hopefully! - aesthetically pleasing web page when viewed via your web browser.

To give you a quick example of how it works in practice, here are a couple of sentences I wrote using HTML:

Check out this AWESOME guide to Pinterest.

- a blogging guide by Babi a Fi.

And here they are without any:

Check out this AWESOME guide to interest. - a blogging guide by Babi a Fi.

Big difference, huh?


What HTML should I know?


As a blogger you won't really use any structural tags - commands which tell the browser about the basics of the page - with, perhaps, the exception of meta tags. They're the ones aimed at search engines, and so are often used for SEO (search engine optimisation) purposes.

This post will focus on giving you a grounding in three areas: Text Formatting, Links and Images.

Text Formatting


There are lots of cool things you can do to your text with HTML. You can make it bold, you can make it italicised, and you can underline it. You can make it subscript, superscript, or strike it through. You can change the font size, colour and even the actual font itself.

Basic guide to text formatting with HTML

To make your text a specific colour, you can use hex codes. Black is #000000, for example, while red is #FF0000. Wiki has a great article on web colours HERE. When you're choosing a font, you can select a back up in case the browser can't display it. Read more about it - and the fonts available - HERE.


Images


Blogging and pretty pictures tend to go hand in hand - and HTML can have almost as big an impact as the effort you took in creating the image in the first place.

HTML for IMAGES
Please note that this uses the CSS (cascading style sheets) based 'style' property. CSS helps user interfaces with the presentation of documents in markup language and, although pure HTML attributes are simpler, HTML5 no longer supports them.


Links


We all know how important they are! Here are some of the extra things you can do with them:

HTML for Links


CONVERSATION

36 comments:

  1. Hey, have you thought about self-publishing a reference book for bloggers?? You could do it on amazon, with hot links etc -- you have SO MUCH good information!

    Honestly, same with your history posts about music and photography... it probably wouldn't take much to turn those into e-books. Even if you were just selling for .99, it could add up! And be more available for people who were looking for that information... you could expand it a little to include more photos and maybe sort of instructions and descriptions that would be helpful to a writer, and sell it as "historical fiction author's guide to _____" Just a thought!! :)

    ReplyDelete
    Replies
    1. I'd love to do something like that eventually - my mum is constantly nagging me to write more productively. It's just the confidence to go for it, I think! x

      Delete
  2. Thank you so much for this post! I didn't know that HTML5 doesn't recognise some tags. I use basic HTML that I learned years ago, but I'm not a techie so I don't know about the latest updates. You're a lifesaver!
    xx Katie.

    ReplyDelete
    Replies
    1. Most of the time they still work fine, but I suppose it will begin to change moving forward. I learned all my HTML coding my MySpace page back in the day, lol. Things had moved on a bit when I got back in it. xD x

      Delete
  3. This ia a great post - very useful. It took me a while to understand it all when i first started! #KCACOLS

    ReplyDelete
    Replies
    1. It can be really confusing to get your head around at first! x

      Delete
  4. Brilliant post, it clearly highlights how you can easily up date your blog post or create a brilliant blog post with a simple piece of HTML. I love your infographics to help demonstrate how easy it is. Claire x #KCACOLS

    ReplyDelete
    Replies
    1. Thanks so much! A little bit of HTML really can make a big difference to a post. x

      Delete
  5. You are definietly an HTML whiz, a great post. I'm only picking things up gradually now I'm on wordpress and understanding how to use it to make things happen as I want. #KCACOLS

    ReplyDelete
    Replies
    1. Aw, thank you! I really want to learn more involved code, just need to find some time... :)

      Delete
  6. great post!I know hardly anything about HTML. Thanks for making it clearer xx
    #PoCoLo

    ReplyDelete
  7. I think I am actually starting to understand HTML a little bit more now. This is an excellent post and it really helped me learn a bit more too. I agree with the above comments you should definitely produce a book for bloggers, I would definitely buy it! #kcacols

    ReplyDelete
    Replies
    1. Aw, thank you! I am seriously considering making a little book of something. Not quite sure what yet though! x

      Delete
  8. I don't know anything about HTML & find it totally baffling. Luckily I've never had any problems but love what you can do with text. Maybe I should learn a bit. #kcacols lifeinthemumslane

    ReplyDelete
    Replies
    1. It comes really quickly once you start. :)

      Delete
  9. This a really handy guide - again! Thanks for sharing! #KCACOLS

    ReplyDelete
  10. This is brilliant advice and a lot of handy bits of code for people to save. When I first started trying to suss out HTML I made a rule that for one week, all my posts had to be written in the HTML section until I got the hang of it. It took ages but I feel I learned a lot!
    Debbie

    ReplyDelete
    Replies
    1. That's a really good way of getting the hang of it! x

      Delete
  11. Wow Jess, this is fab!!! I have put it in my favourites! Whilst a lot of it went straight over my head on the first read, I would love to come back to it and really absorb the information!Thank you so much for linking up to #KCACOLS Hope you come back next Sunday xx

    ReplyDelete
    Replies
    1. Aw, thank you! I'm hoping to work it all up into a full blogger's guide eventually - just got to get all the bits in place first! x

      Delete
  12. This is great advice. I'm not great at things like this and found your post very useful. Going to pin it on pinterest so I can go back to it. Thank you for posting this x

    ReplyDelete
    Replies
    1. I'm so glad to hear it's proving useful! :)

      Delete
  13. Another super-useful post - and once you get your head around a bit of html it's pretty easy to read, I've done some before in my proper job and it's such a help! Thanks for linking up to #PoCoLo and for being a fab #newbieshowcase x

    ReplyDelete
    Replies
    1. Thanks so much for having me! It's quite a fun thing to learn, I think, because you can see the results so immediately. x

      Delete
  14. Good advice. I know bits and, as you say, it is useful if something is playing up, & if you want to do something a bit more usual. I also sometimes find I need to write code in myself if I have something customised on my site that then doesn't translate if I go to publish the post elsewhere. #KCACOLS

    ReplyDelete
    Replies
    1. Yeah, it can seem fine in one preview then all go to pot! Lol x

      Delete
  15. Love this, it's really useful for us bloggers! Thanks so much for linking to #PoCoLo. xx

    ReplyDelete
  16. Pinned this for future reference - what a great post and so informative. I've learned a lot more about HTML since starting blogging but having this info together in one place is so useful.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete

I love to hear from you, so please don't be shy!

Life in Plastic Advertising Banner