Lesson 2: Basic Structure Of A Web Page.

The backbone of a webpage can be subdivided into three segments

The declarations

As the name implies, the first thing to do is to write your webpages. This is mainly for introducing the type of document you are writing.
With this, you are telling the browser to read the pages as a web page.

This segment contains these two tags <!Doctype html> and <html>, these two codes can be omitted and your code would still run but it is advisable to write them in your code.

The head

I like to call this segment the meta area. It majorly contains the meta tags (more about meta tags coming up later). It contains the important information about your page such as the encoding type, the langue, the viewport, etc you will learn all these later in the coming posts.

The <head> tag opens it, contains <meta>tags and </head> closes it.

Note: This is not the place for the webpage header.  Whatever you write in this segment would not be display for your viewing, it only holds information for the browser and not the user.

You can omit it and your page would still function, but the browser would make use of default settings.

The body

This contains the bulk of the code including the header of the web page. It opens with <body>tag and closes with </body>. It can contain as many elements as possible. You can omit the <body>and</body> tags and just go ahead with writing your codes but this isn’t recommended.

The footer:

This segment holds the bottom end of the webpages. It opens with the <footer>tag and closes with the </footer>. You can as well omit the tags and your code would still be interpreted correctly.

The closing
This is the last part of a webpage code, it contains the closing tags. The HTML code can be nested and for proper interpretation of the codes, each tag must be closed.

Sample code
<!Doctype html>

<html>

<head>


</head>

<body>
<h1>
 This is the header </h1>
This is the paragraph
</body>

<footer>
<div>
This is the footer. Copyright 2019</div>
</footer>
</html>

Output:


output image of the sample code



The flow of the web page structure

For each segment of a webpage, codes are written in a structured cycle following this pattern:

Opening declaration:

Also known as the opening tags. Every element of the web code must start with the opening tags.

The content of the code:

Content of the element is always preceded the opening tag.

The ending:

Same as the closing tag, It comes after the content of the element and shows the end of an element

Throughout your code, you will start by declaring the type of the element you are writing with the opening declarations, followed by the content of the element and then the ending tags which are used in declaring the end of each element.

Read lesson 1  if you don’t understand the terms used here.

Sample of a webpage format

Webpage Structure




How To View A Webpage Source Code.

If you see a web page and you are wondering how it is written, just right click  on an empty space (white space) of the web page.

Then click on view page source in Chrome browser or view source in Internet Explorer (IE) or  view page source in Mozilla Firefox and Flock

Or just press control + U on your key board to view the code.

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts