Thursday, 5 June 2014

A Guide to Basic HTML

One of the most daunting parts of websites and creating pages on the internet is tackling HTML. Luckily, as I studied media and website building was included as part of my degree (plus endless hours creating websites on Piczo when I was a teen) has helped me gain some good knowledge of HTML, so I thought I would share it with you.

HMTL is the coding that makes up a website - it dictates everything from the font and it's size and style, to layouts on your websites. It can also add features such as disabling right clicking to prevent users from taking your content to helping with your SEO to increase traffic to your blog. But don't worry about that, this post is going to help you with the very basics of HTML.Most people won't need it if they are using the standard 'new post' box that appears when you start creating your post, but at the top there are two options 'compose' and 'HTML' - the compose option opens it up like word, and is the layout you are probably most used to seeing, it gives you the editing tools you need to create your post. However, if you click the 'HTML' option, it opens it up like Notepad and you have to enter the coding yourself to change everything from the spaces between paragraphs to how big or small you want your lettering - including the font style and colour!


HTML to help with fonts is probably one of the most used HTML codes (along with pictures and links) that will be used when it comes to blogging. So here are the most common and probably the simplest HTML codes to alter your text.

<b> insert text here </b>    - this will create bold letters.
<i>  insert text here </i>     - this will create italic letters.
<u> insert text here </u>    - this will create underline letters.
<s> insert text here </s>     - this will create letters that have a line through them.
<center> insert text here </center> - this will center the text (or image) to your page.

It is important to note that at the end of each code you end, so you will notice I open the coding by using <b> and then type in the next I want, then to end it you have to do the same code again, but include a forward slash, for example </b> this tells the programme that you don't want that style to continue on to the rest of your text.

To change the font style, such as size or font you can use the following HTML codes.

<font size="5"> insert text here </font>  - this will create text this size.

You can alter your text to any size by increasing, or decreasing the number - the higher the number, the larger the text will be. The smaller the number, the smaller the text will be. But again, remember to always close the coding by use the forward slash, otherwise the whole post or page will be in that style.

Paragraphs and Breaks.

Unfortunately, with HTML, when you hit the enter key to start on a new line no code is generated, You can spend hours and hours coding your absolutely perfect page with images, colours and text - but if you forget to add in paragraphs and line breaks, i'm afraid to say that it's just going to end up as one big text block!

<p> insert paragraph here </p>   - this will create your paragraphs for you. type the entire paragraph between the two codes and do that each time you want a new paragraph to start and end.

But what about line breaks? You will still need to include them if you want a end a line and start on the one below, such as if a character is speaking in a book, but you don't want to start a new paragraph. This is where you use breaks.

<br> - using this code will put the next text on to the next line.
<br><br> - using this code will put the text two lines below.

for example: 
the quick brown fox <br> jumped over the lazy dog.

this will be turning in to:
the quick brown fox
jumped over the lazy dog.

and if you use two, so you put it: the quick brown fox<br><br>jumped over the lazy dog.
will be turning into: the quick brown fox

jumped over the lazy dog.


It is without a doubt you will also want to include links in your blog post - but the question is, do you want to just put the link in or make it clickable text? To just have the link - that's fine, just type it like normal. However, if you want to add clickable text LIKE THIS then you can use the following coding.

<a href="">Linked Text Here</a> 

Simple replace with the website you want to link too - remember to make sure you keep the quotation marks and not accidentally delete them as they are an important part of the HTML coding. Then replace the Linked Text Here with the text you want users to click in order to be sent to that website.

for example: <a href="">Click here to visit my blog!</a>      will turn into Click here to visit my blog!


Colours can be complicated, but it's good to remember that all colours are based off three staple colours - red, green and blue. Each colour is assigned a number, which are:

00000 is Black
FFFFF is white
FFFF00 is Yellow
FF000 is Red
0000FF is Blue
00FF00 is Green

Here is a list of codes you can use to change the colours on your blog, whether it be backgrounds or text.

<span style="color:#000000"> - this will make your text black.
<body style="background:#000000"> - this will make your background black.
<a style="color:#000000>  - this will make your links black.

Every colour has been assigned it own 6 digit combination of numbers and letters, which goes back to what I said previously about colours being made up of three colours - the primary colours, and that is reflected in the coding.

000000 - the first two numbers/letters tell you have much red is in the colour. So, FF0000 is true red as no other colours are in there.

000000 - the second two number/letters indicates how much green is in colour. 00FF00 is true green.

000000 - the third two number/letters indicate how much blue is in the colour. 0000FF is true blue.

Knowing this ables us to mix our own colours, all you need to remember is that 00 means least intensity, and FF is the most intense. It would be complicated to get in to a whole range of colours and combinations at this stage, so I will link you to a website that can help generate colours for you and provide you with their HTML combination. You can find that here.

I hope that has helped a little bit, and let me know if there is anything else you want to know!


  1. This is a great guide to the basics of HTML. I'm lucky enough to have a brother studying computer science at uni so he's helped me out a lot with my blog x


    1. Always handy when you know someone who has a bit of knowledge! ;) x

  2. What a great post!! Gonna add it to my favorites bar so I can consult it! :) xx

  3. This is a very helpful post, thanks for this :) I remember learning a lot of this way back when I had a myspace profile but I've forgotten so much of it so this is a nice reminder. HTML can be so intimidating.

    1. I know, i was SO confused when I first started using HTML. x


I'd love to hear what you think. I will respond to every single one of your gorgeous people!
Please don't comment just to leave your blog link - but if you actually have something to say, then I don't mind you leaving it at the end!

Thank you.
Amy xo

Related Posts Plugin for WordPress, Blogger...