HTML Tutorial 03: Creating Body And Headers


In the last tutorial, we are able to create a webpage with a dorm text as the title (mine is TopCRIX Studio, depends on what you used) with nothing in the body.

Now, we need to create something in the body of our webpage.

If you can still remember, I said a website consists of two (2) parts;

1. The head: which is the area you can't actually see (where browser's information goes) like the one in the image below



2. The body: it contains the Images, paragraphs, links etc

We need to make something appear in the body of our new blank website.

In other to create something in the body of a website, you must follow these process

You need to put the open <body> & close </body> tag of the body below the close tag of the head </head> as illustrated below

<!doctype html>

<html>
<head>
<title></title>
</head>
<body>
This is the website body

</body>

</html>

Let's go ahead and save it. Let's preview on our browser, you will see the exact text within body on our new website. Which is anything you type within the body.

This is great, right?! But, we can't leave our website like that. We need some basic concepts whenever we want to write articles or we want to make titles on our webpages. And that is; how to create an "Header"

What is Header? A header is totally different from head, don't get confused. Header is what we can call the main title on a webpage, for example the headline on a newspaper.

Let's add a new title to our website using header. Less I forget, a header is always a bold big title and it has 6 different sizes, we have the h1 to h6.

Header 1 which is h1 is the BIGGEST
Header 6 which is h6 is the least of all the BIG header. Don't misquote me, h6 is also header but not as big as h5 to h1.

Shift the word "This is the body of a webpage" down to the next line and above it type;

<h1>Welcome to my world</h1>

Let's copy this and paste it below the h1 and change the h1 below to h2 (both the open and close tag) as illustrated below



Let's preview. Can you see the different between the h1 and h2



That's how it keeps getting smaller all the way down to h6.

That is how we create a basic header and also have basic text in the body of a website. Simple? Yeah! I know, we need to learn the basic before we move into adding images and creating professional websites. In our next tutorial we are going to learn how to create paragraph and line breaks

Practice more often, get used to this and in just a matter of time you'll become professional website developer.

Don't forget to {subscribe} to get latest update of this tutorial.

You can't wait to become a professional website developer? get ahead of others or would like to  request for the full video tutorial, join our WhatsApp Based Training or visit us today @Shop 9/11 Sower Plaza Asa-Dam road, Ilorin Kwara State.

You don't have time to learn but would love to have a fantastic website for your brand, check out our budget friendly beautiful website packages. Our web design service is awesome and affordable.

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Search