Wednesday, January 1, 2014

Valid Structure of HTML Codes to Create a Webpage


We have learned to create a website simply without knowing any html tags or codes from the previous post. But, is it really possible to create a website without any tags/code? No, it's impossible. Tags are must to create a website. That's why we need to know them properly. Not only the tags, we also need to learn the attributes. In this post I have discussed about the valid structure of HTML Codes to form a webpage. You will learn the uses of some basic HTML Tags and Attributes also. Lets see the basic structure of a html page.

<!DOCTYPE html>
<html>
   <head>
   CSS, JavaScript etc. will be in this section
   </head>

   <body>
   The main visible part will be here
   </body>
</html>


Let's make a simple webpage using the above codes. To do so, follow the steps given below.
  1. Open the Notepad text editor
  2. Type the above codes except the Ash Colored texts
  3. Now type <font color="blue" size="20px">This is my first webpage</font> inside of the opening body tag <body> and closing body tag </body>
  4. Save the document as iDhali.html or iDhali.htm
  5. Now locate the html document and open it with a browser software
//Lets know how to save a notepad document as an HTML file//

That means the total codes will be...

<!DOCTYPE html>
<html>
   <head>

   </head>

   <body>
      <font color="blue" size="20px">This is my first webpage</font>
   </body>
</html>

HTML,Website designing,structure of HTML
After opening the newly created html file, you will get the result as like as the image given below...



Now you may add a Title to the existing webpage. So, we have to add the line <title>Computer Tips & Tricks</title> into the head section. And now the codes will be...

<!DOCTYPE html>
<html>
   <head>
      <title>Computer Tips & Tricks</title>
   </head>

   <body>
      <font color="blue" size="20px">This is my first webpage</font>
   </body>
</html>

After saving the document when you will open again with a browser, then the following result you will get.

It may seem that the both image are same. Look at them carefully, there is written iDhali.html as the title in the first image. That means the first webpage has taken the file-name as the title. But in the second image there is showing Computer Tips & Tricks as the title text.

1. Let's learn different types of text formatting to beautify a website
2. Create a webpage very easily without knowing any codes


No comments:

Post a Comment