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 <!-- and end the comment with --> characters. You have to type them exactly like shown here: <!-- Write your comment here -->.
<!-- This is a sample --> “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.
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.
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>”
<div id="wrapper" style="text-align:center;">
You must end div tag with an ending tag </div> so write the following just before </body> towards the end of the page:
Save the file and open “global family.com.” You will see that everything between <div> and </div> is centered.
In the below shown line (footer on our web page) there is a copyright symbol © besides the word, Copyright.
Copyright © 20XX, TheThinkClub, All Rights Reserved
In html5 there are codes for placing those symbols. The code for © is &copy;. All we have to do is write that code in our program like shown below:
Copyright &copy; That will appear like: Copyright © on the web page.
Here is a list of some of the commonly used symbols and their codes.
Let us go to Section 2 where we will learn about Header, Nav and Footer.
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.
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:
<nav><table style=”width:100% “ cellspacing=”2” cellpadding=”6” text-align=”center” background-color=”#ffcc33” color=”white”>
<tr><td style=”width:25%"><a href=”Home.html”>Home</a></td> <td style=”width:25%”><a href=”Members.html”>Members</a></td>
<tr><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>
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
<table style="width: 100%" cellspacing="2" cellpadding="6" text-align="center" >
<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>
<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>.
Open the “global family.html” file. Write the following below Google.com link line towards the bottom of the page:
<footer> <table> <tr>
<td>Copyright © 20XX, TheThinkClub, All Rights Reserved</td> <td style=”text-align:right”>Designer: Anil Shrivastava</td>
</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:
Copyright © 20XX, TheThinkClub, All Rights Reserved Designer: Anil Shrivastava
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.