2017/09/18

[Self-Hosting Basics] HTML Cheat Sheet


Having a basic understanding of HTML will give you a huge confidence boost when you start managing your website. Being able to make simple changes yourself will not only save you time but also money, because you won't need to outsource your problem.

I've devised this guide for total beginners, so even if you've never looked into HTML before you'll be able to make any changes quickly and easily.

You'll soon be able to master HTML with just a little bit of knowledge to get you started.  You can find below a few of the most common post and site formatting options you can use when coding in HTML.



What is HTML?

Also known as Hypertext Markup Language and the main programming language of the internet, also one of the simplest to pickup.

By recognising basic HTML commands you can do things like:
  • Embed and add analytics to your website
  • Sort out image alignment issues
  • Format your blog post for easy readability.
You can locate your HTML files by logging into your host.

Simple HTML Tags

Every piece of code has opening and closing tags.  A command will start and end with it.  Depending upon the HTML tag you choose the opening and closing brackets will be formatted by this.

It looks like this: <p>This is a real sentence.</p>

The first <p> tag starts the sequence and it ends with the </p> tag. The final / in the closing tag is very important, without this tag your code won’t function properly and will lead to formatting errors.

 Common HTML tags are:


<strong> </strong> - For bold text or headlines.
<em> </em> - To italicize your text.
<body> </body> - For the body of your html document.
<a> </a> - Allows you to insert links.
<center> </center> - Allows you to align your text in the centre of the page. <head> </head> - This the header of your website.

There are a lot more HTML tags you can use to change your website.  You can find more common tags below.

Headings with HTML

Another great formatting tip is to organise your text using various headings, this will give your blog post a logical structure.

More common headlines are:
  • <h1> </h1> - Surrounds your page and post title. 
  • <h2> </h2> - Main headlines with your blog post will use the h2 tag. 
  • <h3> </h3> - Headlines within h2 tag will use h3 tag.
With the above headline structure, you'll have a more logical post structure, making it easier for your readers.

HTML Tips for Beginners

Let's put the above information into practise.  Discover below how to properly format your text using the HTML tags highlighted above.

Formatting Your Design

You can make certain portions of your text stand out by using bold, underline and italicise, see below:
  • <strong> </strong> - To bold your text. 
  • <em> </em> - Italicize your text. 
  • <u> </u> - Underline your text.
You can use these tags in your existing paragraphs to change the formatting of words, it will look something like this:

<p>This sentence that has<strong>boldtext</strong>, <em>italic text</em>, and <u>even a bit of underlined text</u.</p>

Linking Within Your Content

When you add a link to your content you'll be using <a href> tag. You'll also require the URL of the website you want link to.

 A link to, let's say, HostGator.com, would look like this: <a href="https://www.hostgator.com">visit HostGator</a>. 

Within the quotations is the site you want to link to, the text will be hyperlinked within the

Add an Image to Your Site

Your users will connect to your website more readily when you add images.  You can do this with the code below:

The image tag is <img src=" ">. Notice that there is no end tag for the img command.

To pinpoint the image you'll need to upload from another point online, always make sure it's an active URL where you can visit the image.

The code should look something like this:<img src="http//myimage.com/thisismyimage.jpg">.

How to Align Your Text

With the following code you'll be able to justify your text exactly how you want it.

Use the following commands:
  • <p align="left"> </p> - Left align text within the p tags. 
  • <p align="right"> </p> - Right align text with the the p tags. 
  • <p align="centre"> </p> - Centre align the text within the p tags.
How to Add Block quotes to Your Website

You can break up the formatting of your content by highlighting quotes.  Creating a separation so your readers can tell you're quoting someone else.

Simply add the <blockquote> </blockquote> tags to any content you wish to format.

With the simple tips above I hope you can make the clear changes to your website.  Tell me about your HTML experiences in the comments below.

Read more: Write a Successful Series on Your Blog in 7 StepsHow to Stay Passionate About Your Blog[Combating Bloggers Block] 9 Types of Blog PostsTwo Important Elements that Create Successful Blog Content


Comment