Welcome to iNFiNiTUDE PROGRAMMING SCHOOL!!
HTML TUTORIAL PART 2 : CREATING YOUR FIRST WEBPAGE
In this tutorial we will create your first web page, hope you have gone through the basics in
HTML TUTORIAL PART 1Once your done here with the basics it is time to create your first web page, here is a brief step by step instructions to do that:
First open your Text Editor (it can be a notepad, word pad or text editor etc..)
Then it's time to recollect the Basic Template for HTML code as explained in the HTML TUTORIAL PART 1, it is as shown below for your reference:
- Code:
-
<html>
<head>
</head>
<body>
</body>
</html>
Ok so this is the template we are going to use through out the tutorial(Remember this template will be available in all HTML web pages) its time to edit the template as shown below:
- Code:
-
<html>
<head> Welcome to iNFiNiTUDE PROGRAMMING SCHOOL</head>
<body><br>This is my First web page</body>
</html>
once you have typed the above content in a notepad or text editor, just save the file with an extension of
.html for example: first.html
Now just open the
first.html (by double clicking the file), you will see the content as shown below in the browser:
- Code:
-
Welcome to iNFiNiTUDE PROGRAMMING SCHOOL
This is my First web page
Congrats!!!
you have created your first web page....
ok lets explore the above code,
<html> indicates the starting of the html and
</html> indicates the ending of html document
<head> indicates the heading of your web page, the text appears on the first line on your web page (it is not necessary to give any content in head tag) and
</head> indicates the ending of the head tag
<body> indicates the starting of body tag, this is where the contents of your web page is going to be placed(we will discuss further about the formatting of body tag in detail as we proceed)
</body> indicates the ending of body tag
<br> indicates the line break (this tag is used for formatting the output), when you use this tag the output following the tag is going to be printed in the new line or next line
Note: Certain tags does not need an ending tag ex: <br>
Note: To view or edit the source of a already created web page, just right click on the web page and select "view page source" or just hit "ctrl+u" which is a shortcut key to view the page source or go to view menu in the browser and select "view source" from the drop down menu. Title Tag:The title tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Let us now insert the title tag into the above code and lets see what happens,
Note: To view or edit the source of a already created web page, just right click on the web page and select "view page source" or just hit "ctrl+u" which is a shortcut key to view the page source or go to view menu in the browser and select "view source" from the drop down menu. - Code:
-
<html>
<head> Welcome to iNFiNiTUDE PROGRAMMING SCHOOL</head>
<title>iNFiNiTUDE</title>
<body><br>This is my First web page</body>
</html>
Can you spot the difference between the first page and the new page generated by the above code?
yes, in the first page the browser title is as
"MOZILLA FIREFOX" (Assuming that your using Mozilla Firefox bowser) and in the new web page generated using the above code has the browser title as
"iNFiNiTUDE - MOZILLA FIREFOX"So the purpose of title tag is to give the browser a user defined text (which gives a short description of the content of web page)
A title tag should have a closing tag like your html, head and body tag's which is indicated by
</title>Hope the tutorial is easy to follow, just play around with the today's learned tags and create new or edit the above code's to make your own web page and stay connected for the next tutorial for HTML as we go through all the tags in HTML.....
-Arvind
Subject: HTML TUTORIAL PART 2 : CREATING YOUR FIRST WEBPAGE 
Tue Jun 23, 2009 12:18 pm
