Learning to code is something that requires a lot of attention + practice. To start building or editing websites, you need to know the basics, which is where HTML + CSS come in. You need to learn HTML before anything else. Everything is centred around this fantastic language + this is where we will start our journey.
In this post, I will explain what HTML is, what it does + even give you some useful HTML tags to use.
What is HTML?
HTML stands for Hyper Text Markup Language + this is a computer language which was originally created in 1980 for researchers, but introduced to browsers in the late 90’s.
Every web page that you visit today will be structured using HTML. It creates the layout of the page that you are able to view using specific symbols + codes – these are called tags – which are usually written + edited in a text editor.
Note: WordPress has it’s very own text editor that you can write HTML tags in. When writing up your page + post content in the visual editor, simply click the text tab + you enter the text editor as easily as that. Remember, HTML tags don’t work in the Visual editor, only the Text editor.
Tags are what differentiate standard text + HTML code. The tags tell the browser (Internet Explorer, Chrome, Safari, etc.) what to do with the text inside the tags + therefore turns the code into reality when viewing the web page.
Each tag has to have an open and closed tag in order for it to display properly.
An open tag starts with a < and ends with a >, like so: <b>.</ br>
A closed tag starts with a </ and ends with a >, like this: </b>.</ br>
So this tag combination would look like this <b></b>.
This is a basic tag that will turn any text you enter between the open + closed tags bold. So if I were to type <b>I want bold text</b>, the browser would read the HTML tags + display the text inbetween as instructed by those tags, like this: I want bold text.
Here are some examples of basic HTML tags that you can start using today. Give them a go using your WordPress text editor + let me know how you get on. More tags will be added as we continue the series:
|<b>Bold Text</b>||Bold Text|
|<i>Italic Text</i>||Italic Text|
|<u>Underline Text</u>||Underline Text|
The above are examples of Formatting Tags + are used to add styles to areas of your text. These styles can be applied with the touch of a button in your WordPress Visual Editor, but for the sake of learning to code, head on over to your Text Editor tab + test out your first experience of writing code.
You can place tags anywhere in a sentence + you can even combine tags:</ br>
This is an <b>example sentence</b> that I am going to <u><i>style</i> in various ways</u> using HTML tags.
This becomes:</ br>
This is an example sentence that I am going to style in various ways using HTML tags.
That’s all for today. I don’t want to over power you with too much info, so go + grab yourself a coffee + come back soon for the next part.
If you have any questions, please drop me a comment below + I will be happy to help.