HTML or Hypertext Markup Language is the coding that websites are written from. It’s the language a computer uses to describe the layout and content of the web page. The search engines then use these codes to know how to render the page. Fortunately, it’s a lot easier than it used to be, there are now loads of software available to you that pretty much do most of the hard work for you.
How you used to build Web Sites
You used to have to start your web page from a blank white screen and you had to write the HTML coding for everything from the background colour, page layout, menus, how the page functioned and even text positioning, font size and colour. It would give you a amaze you if you saw the code needed. It would be painstaking if you found a problem with a page or something wasn’t doing what you wanted it to, as you would have to go through all the coding again to find what was causing the problem before you could fix it.
Thankfully sites like WordPress are amazing as they do a lot of this for you all you have to think about is finding the right keywords and creating the content. Fortunately, WordPress still allows you to be creative and use HTML code within your content which allows you to do further enhancements like font size, colour and adding links for images and other web pages. This is because it uses two panels, a visual one where you will do most of your work and a Text panel. The Text panel is the result of all your visual content converted into HTML which WordPress has done for you.
It’s in the Text panel that you can add additional HTML coding to really make you page even more unique.
Useful HTML Codes for your WordPress Site:
As I’ve been building my site I have needed my site to do certain things. This is where the HTML coding comes in handy. On this page, I will share the ones I find useful for you WordPress site.
Some you don’t need as WordPress does some for you. I will share this with you too. Other are really great to incorporate into a site to help jazz it up a bit and give yourself more of a unique feel.
Adding a Link to your Website
Adding a link within your content is really useful when you’re promoting or review a product or a site or if you just want to make one of your pages more easily linked to another page within your site.
To add a link it is a very easy piece of coding:
<a href” “> </a>
The good thing about this code is you can make your link say anything you want instead of just have your web address.
For example, if I wanted to add my homepage, www.avoidonlinescamsandstaysafe.com, as a link into my content but make it read Please click here instead.
Just follow this step by step:
- Type the phrase Please click here onto my web page in visual mode.
- You then switch to Text mode so that you can enter the HTML code you need.
- Find your phrase Please click here within your content.
- You then add the code <a href”PUTTING YOU WEB ADDRESS HERE”> and after the phrase Please click the link you would put </a>
- so <a href”www.avoidonlinescamsandstaysafe.com”>Please Click here</a>
- Then Switch back to Visual mode again
- You will then have this: Please Click Here
Well done you now have a functional link built into your page.
Adding Colour to your Content
You can spice up your site by jazzing up your headers or highlight a word you would like to stand out in your content by using the right coding. This is also useful to highlight your web links in one particular colour so your customers get more familiar with your site. Using techniques like that create a more user-friendly site that customers will come back to.
For Example:
In this phrase, we have decided we want to highlight the word HTML in blue.
When building a website you use HTML, it is the coding that websites are built from.
The coding you need is:
<span style=”color:Blue;”>YOU CHOSEN WORD GOES HERE</span>
So to add this code to your site you first must switch your page your editing to ‘Text’ instead of ‘Visual’ (see image below)
You then need to find you chosen phrase within your content. You then add your coding before and after the word HTML like so:
When building a website you use <span style=”color:blue;”>HTML</span>, it is the coding that websites are built from.
When you then switch back to ‘Visual’ you will see your word highlighted like this:
When building a website you use HTML, it is the coding that websites are built from.
Setting different font sizes
You can really set the flow of your site and make it appealing to the eye by adapting the font sizes of your text. From standardising all your headers to flow with your theme headers or highlighting the information you want to stand out.
The code you need for font size is: <span style=”font-size: 100%;”>YOU TEXT HERE</span>
You then change the 100% to what size you want for example starting from 50% and going up 50% a time you can create this.
50%
100%
150%
200%
250%
300%
How to add a link that goes to the top of your page
This is a simple but very effective bit of code to add to your web page to make your pages more user-friendly. This is especially useful if you a long post and instantly sends the visitor back up to the top without sliding back up. This is a great way to keep them on your page longer as you want them to them select another page from your menu.
At the top of your page find the opening <body> tag and enter this code
<a name=”top”></a>
This then adds an anchor and then you find the bottom of your page and add the # symbol to you anchor word and add this code:
<a href=”#top”>Back to top of page</a>
Now update your page and you are all set.
Hope you find it useful
How to add a Back Button
If you add this code below it will a Back Button to your page, allowing customers to go back 1 page from the page they came from. This doesn’t work if they have opened the page in a new tab or window.
<FORM><INPUT Type=”button” VALUE=”Back” onClick=”history.go(-1);return true;”></FORM>
The -1 in the code means that the user will be taken back one page.
If you are using a template then your button style may vary as the template will adapt it slightly.
I am still fairly new to HTML codes and as I am learning new ones I will keep adding them to this page. If you have any other useful codes you’d like to share that I can add to the site please add in the comment below. Every bit of help is always appreciated.