WRITING YOUR FIRST WEB PAGE HTML

21st Jul, 2019

Click here to share

It’s good you are already through with some basic introductions in HTML. It’s time that you begin to produce something to show how far you have gone in web design, especially HTML.

As a beginner writer, your web page should be something enthusiastic to you and in this lesson, we have covered all the necessary things you should do to make that a reality.

Having read about the introduction to HTML this lesson is divided into three sections to make it easy to follow and grasp.

FIRST CODE IN HTML

<!DOCTYPE html>

<html>

<!-- THIS IS THE WHOLE DOCUMENT -->

<head>

    <!-- THIS IS THE HEAD SECTION -->

    <title> This is the page title </title>

</head>

<body>

<!-- THIS IS THE BODY SECTION -->

</body>



</html>

The above code is a general format of a webpage with all the necessary tags to make up any type of website even the one you are browsing now.

If you look vividly well on the code you will see that the mark up contains three sections all with comments.

1. THE MAIN DOCUMENT

This is the first comment section of our code. It is placed just after the opening <html> tag. This shows that the comment is explaining everything inside the HTML tag.

The HTML tag, however, cannot be more than one in a single webpage. It is the main tag which tells the web browser like chrome, firefox, opera, etc and even the one you are using now that the markup language is html5.

2. THE HEAD

This section of our code is the head section of our web page as the case may be. It is used to include some important information about a web page, just as we have included the title tag inside the head section.

The head section is however used for more things than just the title. But one thing you should note about the heading is that virtually every information in the head section is what the browser and search engine uses to identify the web page.

This is because everything in the head section will all be parsed before any other sections of the webpage like body.

Therefore the following are the uses of the head section of a webpage.

1. It is used to hold the title of a page.

2. It is used to load external stylesheet: this is because the style sheet is needed to be parsed before the HTML is rendered so that the styles can be applied perfectly to the HTML tags as it is being required.

Unlike JavaScript which can be loaded at the footer and it will still function very well, stylesheet can’t work as expected if loaded in any other section.

3. The head section is used to hold all the special information unique to the web page.

This information is informed of meta tags with name and content attributes.

The meta tag doesn’t need you to use the meta-option when closing or it can be said that the meta tag doesn’t have a closing tag.

Some of the information needed in this meta tag can be seen in the following code below.

The code shown below is a typical head section for every web page

1.    <head>

2.      <meta charset="utf-8">

3.      <meta name="viewport" 

content="width=device-width, initial-scale=1">

4.     

5.      <title>Worldtok title section</title>

6.     

7.      <link rel="stylesheet"
 type="text/css" href="css/style.css">

8.     

9.    </head>

3. BODY SECTION:

This is the final section of every webpage. It contains all the tags that the web browser renders to the user. The body tag as and its elements are the main thing that is usually visible in the main section of the browser. This body tag can contain virtually all the HTML tags that you of might think of.

Some characteristics of the body section

1. It is the main section of a web page that is visible to the user in the main view of the browser.

2. Every web page contains only one body section.

3. All the HTML tags for formatting a web page are all enclosed by the body tag.

4. It is easy to write and any content inside the body tag renders sequentially that is one after the other. Though the whole web page has to finish loading before the browser will give a result.

5. The web page can still render without the body tag but it is not a good practice. You can try it out in development mode but don’t do that in production unless for testing purposes only.

That is the complete insight on the sections of a web page and I’ m certain that you enjoyed the article.

The real intention for this lesson is to let you understand the sections of a web page and how all the websites that you browse is being formatted.

Now let us write our website and implement what we have learnt.

EXAMPLE ON HTML

<!DOCTYPE html>

          <html>

          <!-- THIS IS THE WHOLE DOCUMENT -->

          <head>

              <!-- THIS IS THE HEAD SECTION -->

              <meta charset="utf-8">

              <title> This is the page title </title>

              <meta name="author" 
content="EMMANUEL DAVID">

<meta name="keywords" content="this is the tag section">

              <meta name="description" content="this is the summary of this web page but pur users will not even see it">

              <!-- though we dont have stylesheet -->

              <!-- this is the way to load a style sheet in the head section -->

              <link rel="stylesheet" type="text/css" href="style.css">

          </head>

          <body>

          <!-- THIS IS THE BODY SECTION -->

          <div>

              <p>This paragrap is inside the body section</p>

          

              <p>This is the second paragrap</p>

              <p><strong>The text here will be bold when it is rendered in the browser.

          this is because the strong tag is used to format a text to appear in a bold HTML5

              </strong></p>

              <center>

                  <p>Everything here will be centerd </p>

                  <b>This text is also bold</b>

          

                  <p>This is jus diffrent tags that we jus t use in the body section for example</p>

              </center>

          </div>

          </body>

          </html>