Purfylle: HTML For Non-Techy Bloggers

Recent Posts

Wednesday, 18 May 2016

HTML For Non-Techy Bloggers

HTML For Non-Techy Bloggers

You decided to give blogging a go. You thought it would be easy and all you would have to do is write your article and learn how to add an image or two.

Then you found out you had to learn how to add hyperlinks, format your posts, add alt text and a host of other things that is all a bit more technical then you signed up for.

Now your WYSWIG editor (post editor) isn't playing nice, pictures won't align properly, text stubbornly stays centred and everywhere you turn for help you're being advised to edit directly in your HTML.

You click that HTML view button and you see gibberish. This big mash of code that looks incomprehensible. You feel like an idiot. How can anyone understand this stuff? It's mind boggling.

HTML doesn't have to be mind boggling

You think to yourself that you're a writer not an IT geek. You consider throwing your computer out the window or maybe just quitting blogging altogether. It's either that or go bald from hair pulling.

You've tried searching the interwebs for some explanation that will make sense and you can't get your head around it at all.

You're not stupid, you know you're not stupid so why don't the explanations make sense???

Mostly it's simply because tutorials assume you already know some of the basics and they use terminology you've never even heard of before let alone understand.

Learning HTML is as easy as learning to read and write, and you are reading this so I KNOW that you have the ability to learn HTML to the level you need for your blog.

I'm going to show you those first ABC's of HTML so you can stop tearing your hair out.

NB: I use Blogger so these tutorials will be from a Blogger platform perspective however if you use Wordpress or some other blogging platform they should still be helpful to you. 

How To Read HTML

HTML tutorials seem to think that you already know the HTML equivalent of the alphabet and that reading from left-to-right is obvious.

But reading from left-to-right is not true of many written languages, some are written right-to-left or top-to-bottom, so why should it be obvious a particular language is the way it is? If you're trying to read a language the wrong way then it is going to be far more difficult to learn.

HTML is a language - after all HTML is an acronym for Hyper Text Markup Language - and like any other language it's much easier to understand if you're reading it the right way.

So before we learn any HTML lets learn how to look at it. Don't worry, HTML is read from right to left just like you're used to, (well, most of you).


HTML is much easier to understand when it is viewed in an editor that displays it all prettily for you.

HTML is easier to understand if viewed with a good editor

If you use Blogger as your blogging platform when you hit the HTML view button your code tends to look like a big huge mess of text mixed up with all sorts of tags and it doesn't seem to have any rhyme or reason to it.


In HTML view you're confronted with viewing something that looks like the image below. It hurts your brain trying to figure that out.

HTML is harder to read in plain b&w text

But what if it looked like this instead? On the left is the HTML and on the right is what that HTML looks like when rendered.

HTML in colour with real time changes displayed

Here's a bigger version. All that brown and yellow and green stuff might just be a mess of nonsense to you but that white text makes complete sense right? More importantly it's nice and easy to find in amongst all that other stuff.

HTML in colour!

So you see, it's not your fault that when you hit the HTML view button it looks like gibberish, it's simply not the best way to read HTML.

Before we learn about all those coloured sections lets first learn how to view your own posts in the pretty colourful HTML editor.

Step 1.

Go to CodePen.

There are a lot of code editors out there, but I have chosen this one for us to use throughout these tutorials.

We will be using the free level of access. You can make an account (free or paid) if you wish but it is not necessary to participate in these tutorials, it does help if you want to save your work.

CodePen front page

Step 2.

Click on the 'New Pen' button in the top right hand corner.


Step 3.

Close the CSS and JS sections by clicking on the 'x' next to them - we won't be using those sections.

Codepen editor


Step 4.

In your blog post editor switch to the HTML view, copy the code, then paste it in the HTML section in CodePen.

You can make changes in CodePen and then copy back to your post as you please.

move things around to suit your needs in codepen


Now isn't that much easier to look at?

TIP

You can also make the left side larger and the right smaller by dragging the dividing line to where it suits you.

Check out our example in CodePen.

Do you think you're ready to start learning about those coloured bits of HTML now? What aspect of HTML do you want to learn the most?

HTML For Non-Techy Bloggers - code doesn't have to look like a huge mess of b&w text


2 comments:

  1. Oh, yes. Unfortunately there is so much more to blogging than meets the eye...

    ReplyDelete
  2. Wow, Stella, thanks!!
    I don't understand any of that! Thanks for breaking it down for us!!
    Maybe I'll even be able to start understanding it one day soon!!
    I will definitely refer back to this post!
    Thanks again!

    ReplyDelete