Tutorial : Introduction to HTML Basics by @josepha

Hello friend!

Hello friend I welcome you to my tutorial post. In this post, we are going to be looking at HTML Basics. Understanding of HTML which is the first stage of programming that is very important for beginners must especially for kids.

In this post, I have discussed and practically shown the first stage that is to be taking in programing language for you and your kids to understand. So let's get started.

HTML Basics
HTML is a programming language that stands for HyperText Markup Language which is the code that enable a webpage and its content that you normally browse to be structure. For instance, when you open a webpage on your browser, you will see that the content is either structured within a set of paragraphs, data, tables, a list of bulleted points or images and so on. In this post, we are going to be looking at the HTML functions and its basics as our first tutorial on html.

Now the question is what is HTML?

HTML as I have earlier said, stands for "HyperText Markup Language" and it's the present of HTML that enable us to see content on our browser on the internet. So this means that HTML is what help us to see content and without the present of HTML on the browser everything will just look like a text. Having say that Webpage is just a collection of a text which allows us to move from one page to another.

Back to HTML it consist of series of elements that you can use to enclose, or wrap different parts of your content to make your content appear a certain way, or act a certain way that you want it.

In a HTML there is always and open tag and closing tag which we are going to be looking at. But before that let's take a look at how we can begin writing with HTML. For instance, let's take a quick look at the content below.

In this exampe, we would be looking at a line of content where we would be seeing this like; opening tag, closing tag, element and content all from this exampe below.

Now in order to be able to make the text above stand alone by itself, you will need to give the text a paragraph by closing the text with a paragraph tags as stated below.

By applyin the above in your html file your result would be as shown below.

Now before we would continue on how we can start writing a webpage using HTML, I will like us to have an understanding of the Anathomy of HTML element.

Now let's continue with the word we have already written so I can explain the anathomy of HTML element in a simple understanding.

Looking at the screenshot above, we can see that there are four (4) main parts of HTML element which I have previously mentioned above. The 4 main element are briefly explain below:

Opening Tag
The opening tag is what consist of the name of the element which is the (p). The opening tag tell you where the element starts. (i.e it's also where the paragraph starts.

Closing Tag:
The closing tag and that of the opening tag are the same, but in the case of the closing tag you must enclosed your element with slash (/). The closing tag tell you where the element ends.(i.e it's also where the paragraph ends).

The Content:
The content is the your work that you want to display on your browser. It's the text that you type and it known as the content element.

The Element:
The element comprises of the three (4) aforementioned element such as the opening tag, closing tag and the content.

Now let's take a look at HTML document.

Anatomy of HTML document.

In order for you to begin typing your HTML content, you need to have a Visual studio code install on your computer or laptop. Should in case you have it installed on your device already you can follow the simple steps that I will be showing.

But a Incase where you have not installed Visual Studio Code on your laptop/computer you can take a look on how the Visual studio looks like from he Screenshot below so you can get it for yourself.

The anathomy of HTML document, is what wraps up the basics of each HTML element. Now to be able to start typing on the visual studio code above, all you need to do is to follow the steps below.

Step:1 Go to your file and create a new file (i.e you can create it on your local disk). Example of my own is shown below.

Step:2 After creating your file as shown above, minimize or close and open your Visua studio code and click on file and then select Open Folder at the top left hand side as shown below.

Step:3 locate where the new file you created is an select it then click on New File you will then see a dialogue box type in index.html and click on enter.

Step:4 After you have typed the word above, go to the body of the visual studio code content and head over to where you see 1 and tap on it then press your Shift key and 1 key the same time an then click on enter once this sign (!) has appeared click on enter and the result will be as shown from the screenshot below.

Congratulations!!! you can now start writing your webpage.

Now from the result of what you have done on your computer/laptop, which is also shown from the screenshot above, we can see the following things like;

• < !DOCTYPE html>
• < html> opening and closing tag.
• < head>
• < meta charset="utf8">
• < title>
• < body>

On our html document, all the aforementioned code have there own functions and meaning which I would love us to look at on our next tutorial lesson. To be continued

Thank you for your precious time here. Please stay safe and remain bless...