Wednesday, 29 April 2015

Blogging 101 - Basic HTML

HTML is some peoples make or break but it shouldn't be! Once you know the basics it's really not as intimidating as it could be. So, the next part of my blogging 101 series is basic HTML, made simple!

Blogging 101 - Basic HTML

These are the sorts of codes that will make your whole blogging experience so much easier! Some you may never need but it's always nice to have a little bit of information stored away in the ole noggin'!

Changing the appearance of text

Bold, Italics, Crossed outUnderlined, even all four at the same time.

You can mix these together or use them apart, just make sure you close them. The bracket at the end stops the text from being bold, italic or underlined and if you leave it open, everything you write will end up being in the style you have chosen!

Change the colour of text

Who remembers the Myspace days of rainbow font?! I know I do! So if you want to relive the moment or fancy a few words here and there in a different colour this is the code for you!

There's two ways of getting all fancy with your text. You can simply type the name of the colour you want in the code or you can find out the HTML color code.
The HTML color code gives you more control and is super easy to find! A quick Google search will show you hundreds of websites that offer the codes but here's a nice one to use

Line Break

A line break is essentially hitting enter in HTML. It makes everything jump to the line below.

Horizontal Line

So you fancy a bit of organisation eh?

The horizontal line will do just that, give you a lovely straight line. You can edit the line to suit your needs too, from how thick to how wide you want it to go across the page!

So for example here's a horizontal line, set to 80% width, 5 pixels in size and center aligned.

Scroll Boxes

Who doesn't like a scroll box? Loads of text but don't want a uber long page? Sorted.
Don't want pictures taking up all the room and would rather have them in one scrollable box?

You can edit the height & width by simply changing the numbers! Simple.

Inserting Pictures

A blog needs photos right? Most blogging platforms offer a picture insert button now, so there's no actual need to ever use this code but it's always a nice one to have!

You'll need to have an image source or the image hosted somewhere like ImageShack or Photobucket but you just paste the URL into the code where it says image source and boom!


Again this is a code your probably don't need to use. Most blogging platforms offer a link button where you simply paste the address in but it's a nice one to have!

 Just change the address to the website you want the link to go to and swap the text to whatever you want it to say. A lovely clickable link.

I really hope this has helped a few of you and it isn't too complicated! I'll do another Blogging 101 HTML post soon covering a bit more and a few more complicated bits and pieces but let me know if there is anything your desperate for!

Don't forget to check out my other posts from the Blogging 101 Series -

Pinterest for Bloggers
30 Blog Post Ideas
No Follow Links
Why Brands Need Bloggers
SEO Basics For Bloggers
Free Image Sources
Blogging Tips

Until next time!



  1. I remember learning HTML in school and it was all the rage to create a HTML website and have a coloured background with a scrolling marquee from left to right! Good old times :) Great post!

    Shout John

  2. Ahh HTML scares me! So many words and symbols. Your post has been a great help and I didn't realise how simple it really was, I guess I wasn't reading it closely enough. Keep up the great posts! I look forward to more

    - KVL xo

  3. This comment has been removed by the author.

  4. I thought that it was "b" and "strong" these days for bold? seems to recommend the use of b (obviously in the <>)


Blogger templates by pipdig