Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 4 - (Comment, Division, Wrapper, Symbol) and (Header, Nav, Footer)

Section 1- Comment, Division, Wrapper and Symbol

Comment

Comments are essential to organize a programming language. It makes easier for the programmer to locate the sections of the programs. This is also essential for a group task where one programmer would write notes for other programmers.

Comments do not appear on web pages. It remains inactive on the coding pages. In HTML code, you start a comments with  characters. You have to type them exactly like shown here: .

“This is a sample” is the comment that will stay in your coding but will not appear on the web page. You can put any text of any length as a comment. You can put the HTML comments anywhere between the <!DOCTYPE html> and </html> tags.

Division

The tags we use have a specific purpose in mind. For example, <h1> through <h6> decided headings. <a> tag is for links. The <div> tag, as W3C puts it, is a "generic container for flow content that by itself does not represent anything".

<div> tag keeps the pages together. For example, if you write, <div style="text-align: center;"> after <body> tag and write </div> before </body> tag, everything on your page between <body> and </body>will be centered. There is no more any need to write separate inline style rules for each element between <body> and</body>. So, my statement, “<div> tag keeps the pages together” makes more sense now.

You can use <div></div> tags either for the entire page as we did above or you can use that for a section of your page.

Wrapper

In HTML, a wrapper has the same function as <div> Instead of writing <div></div> after and before <body> and </body>, you may choose to write <div id="wrapper"> and </div>. Right now, you need to know only this much. We will discuss this in detail when learning CSS.

As you can see on your web page, the contents are not centered. We can use “wrapper” element to fix that.

Open your file, “global family.com.” Write the following just below the paragraph in the middle of the page ending with “and a supportive community of like-hearted souls to guide the way in transforming society.</p>”

You must end div tag with an ending tag </div> so write the following just before </body> towards the end of the page:

</div>

Save the file and open “global family.com.” You will see that everything between <div> and </div> is centered.

Symbols

In the below shown line (footer on our web page) there is a copyright symbol © besides the word, Copyright.

In html5 there are codes for placing those symbols. The code for © is ©. All we have to do is write that code in our program like shown below:

Here is a list of some of the commonly used symbols and their codes.

Character	Entity/Code	Description
©	©	Copyright sign
®	®	Registered sign
™	™	Trademark
€	€	Euro sign

Let us go to Section 2 where we will learn about Header, Nav and Footer.

Section 2 – Header, Nav and Footer

Header

If you look at any website, you will find a header mostly on the top-left corner of the page showing the name of the company with a logo. For example, if you click on Microsoft.com, you will see the following on the top left of the page:

(Note: The above header and following navigational bars may be different depending on when you go to their web page.)

Open the file: “global family.html.” Type in the following just below <body> towards the top section of the page.

<header style="align:left; font-size:30pt;" ><strong>Global Family</strong></header>

Save your file and open the file in html. When you will open the “global family.html” file, you will see a header, Global Family in the upper left corner of the page.

Nav (Navigation)

If you go again to Microsoft.com, you will find a row of navigation bars beside their logo on the top of the page which may read like “Microsoft 365, Office, Windows, Surface, Xbox, More.” If you click on those bars, they would take you to other content pages. Let us create our own bars.

Type the following below <header></header> tags:

<tr><td style="width:25%;"><a href="Home.html">Home</a></td> <td style="width:25%;"><a href="Members.html">Members</a></td>

<td style="width:25%"><a href="About Us.html">About Us</a></td> <td style="width:25%"><a href="Contact US.html">Contact Us</a></td>

</tr>

Save the file and open the “global family.html” file. You will see the following row just below the header that you created earlier:

Home, Members, About Us, Contact Us

Explanation

You created a <nav> tag for navigation bars to go to other pages on your website.
Every bar that you created is a cell in a table (though it does not show as a table yet. They will show as a table once we link them to CSS file in later Lessons)
Similar to the Table we made in Lesson 3, Section 3, we wrote the following in the nav section:
<table style="width: 100%" cellspacing="2" cellpadding="6" text-align="center" >
Next, we created a table with a single row and five cells. Since 4 cells are all equal in size, we gave them a width of 25% each (100/4=25). See the code below:
<tr><td style="width: 25%"><a href="Home.html">Home</a></td> <td style="width: 25%"><a href="Members.html">Members</a></td> <td style="width: 25%"><a href="About Us.html">About Us</a></td> <td style="width: 25%"><a href="Contact Us.html">Contact Us</a></td> </tr>
<tr> </tr> indicate opening and closing tags for the row and we put the content of each cell under tags <td></td>.
We linked the pages for each bar (cell in this case) to the content of the page (to be created later) by writing the code as follows:
<a href="Home.html">Home</a>.” (Refer to Link in Lesson 3, Section 4)

The first cell is Home. Its corresponding page to be created later will be named Home.html. You should then write the name of the cell which is “Home” in this case. Then you close the link tag with </a>.
And lastly, you close the row by writing the closing tag </tr>; close the table </table> and close Nav </nav>.

Footer

Open the “global family.html” file. Write the following below Google.com link line towards the bottom of the page:

</tr> </table> </footer>

Now save the file and open the “global family.html” file. You will see the following footer at the end of the web page:

Explanation

You created a <footer> tag for copyright, name of the designing company and the name of the designer.
You created a table <table>, a row<tr> and a cell <td> (though it does not show as a table cell yet. They will show as a table cell once we link them to CSS file in later Lessons)
You wrote the content between <td> and </td>
You placed all the needed closing tags, </td>, </tr>, </table> and </footer>.

Congratulations!! By this time you have gained enough knowledge about making a web page using HTML5 and Inline style. It is important that you practice making websites on your own using the materials I have discussed, so far.

You will need 60 hours of practice to get completely comfortable with creating HTML web pages. Once you get comfortable, you should explore the sites that I will post in Further Learning for broadening your knowledge base.

In the next part of this course, we’ll learn about another programming language, CSS3 (Cascading Style Sheets). CSS3 will add colors frames, variety of fonts, fancy print styles and all that jazz. That is quite exciting. So, let us move to Lesson 5 of this course.