How To Create Webpage in HTML Tutorial

HTML stands for Hyper Text Markup Language. The term HTML is related to the world of Internet and it’s used in Webpage Designing. Although there are several language to create an and Webpage but the Basic is the HTML. By Default every Computer at present are able to create webpages using HTML, and it doesn’t require you to install any software from external source as it’s built into the system. The Basic coding with HTML Language is pretty easy and You will be able to create a webpage right after you read this full tutorial. First you should all know that creating a webpage doesn’t mean that people will be able to see it on the Internet, Untill you let your webpages to be hosted by a Server. Basically to show and create a Website there are two sequential part, the first one is to create a Webpage and the next one is to make that webpage to be Hosted by a Server. Here in this article we will concentrate on performing the first part that is creating the Webpage. We will use HTML to create the Webpage.

Now to start We need to create a New Text file, to do so just follow the steps

Go to Start > Programs/All Programs > Accessories > Notepad.

No the Notepad is open with it’s white page. We will write the Coding of our Webpage over Here.

In HTML we use different word or group of words within ‘<‘ and ‘>’ like <html>, <body>, <body bgcolor=”Blue”> etc. These are known as Tags. There are several Tags available in HTML. In this article I would use few of those Tags and make you learn how to use them properly and how to properly code HTML.

Now back to the point where I left it on Notepad it was a Blank page.Now lets Start :

Now to start HTML coding thus creating a Webpage we need to first start the coding by writing <html> and as to end the coding at the last of all coding is complete we use </html> To complete and to end the webpage Coding, Now If we Concentrate on the Tags we would notice that at the start there was no / this sign but as to end the coding we just added / sign at the starting of the word within the bracket of the Tag. so to end a Tag just add a / this sign just before the word within the tag.

Example =====> <html> to </html> , <body> to </body> etc.

So after writing the <html> the HTML coding has just started and the computer will now decode the all the codes right after the tag as HTML webpage not as simple text.

Now after starting the HTML coding we need to construct our Webpage. At first we need to give a page Title and Heading of the webpage which will be shown at the top of the browser and we also need to construct the Body of the Webpage. To accomplish the given task we will use the following Tags : <head> , <title> , <body> .

Now just after starting the HTML coding after the <html> tag write the tag <head> and <title> one after another, all tags should be used in separate line.

We are so far written :

<html>

<head>

<title>

Now we need to give a title to our webpage, suppose we give the Title as ” Test Page ” , to do so we just need to writhe this page title on the very next line of the <title> tag, and after writing the Title on the line after we need to close the Title Tag by using a / sign before the tag and writing it to declair that the title is the written part which lise between the <title> and </title>. As here the Title of the Page and Heading is the same thus we also need to close the <head> tag right after closing the <title> tag, so this far our coding should look as below :

<html>

<head>

<title>

Test Page

</title>

</head>

We should clearly notice and better I would say understand one thing properly that how the tags are being closed in a rhythm, The Tag which opened last is closing firstly and the Tag which opened at first would close at last. That means the openning of a Tag and closing of the Tags occurs in a oppsite order.

The as the Title of the page is given we need to construct the body of the page like Background Colour, Font Colour, Font Size, Font Properties like Bold, Italic, Underline etc.

Now as you see to construct various parts of the page we have already used various Tags, thus for creating the body of the page there is also a Tag just to start the Body Construction, that is <body>, but to keep the coding short we give the Tags of constructing the body part and the background colour of the Webpage as a combined Tag, that is <body bgcolor=”xyz”> , here in we need to replace the xyz part of the tag with the prefered Background Colour like Blue, Green, Yellow. We can also use Coloure Codes for different colures and different shades of colour, I will let you know where to find those colour codes in the end of this Short Tutorial.

Now let us assume we wanna make the background of the our Webpage to be Blue, so we need to add the Combination of the Body Tag on the very next line in the Notepad where I left it last, the whole code should now look as below

<html>

<head>

<title>

Test Page

</title>

</head>

<body bgcolor=”Blue”>

Now after declairing the Background colour we need to give the information about the Fonts on the Webpage, thus we need to use another Tag that is required. The Tag is  here we need to replace the xyz with the prefered colour code or colour name of the Font and # with the prefered Font size, the font sizes ranges from 1-7. By default the Normal font size is 3 thus if we not give the Font Size part the Font Size would set to 3 automatically.

Now assume that we want Our Font Colour to be Red and the Font Size to be 4, so we need to add the Font Tag after the lastly written Code, so our Code now should look like this :

<html>

<head>

<title>

Test Page

</title>

</head>

<body bgcolor=”Blue”>

Now completed giving the Instructions of Page colour and Font Colour and size. So we can Now Insert Text on our webpage. To insert text on the webpage just write the Text you want to insert On a new line after the Font Tag. Suppose You want to Insert the fololowing Text in the webpage ” Hi I’m a Newbie to HTML and this My first created Webpage ” , then just write Hi I’m a Newbie to HTML and this My first created Webpage on a new line right after the Font Tag. So our Code now look like something this :-

<html>

<head>

<title>

Test Page

</title>

</head>

<body bgcolor=”Blue”>

Hi I’m a Newbie to HTML and this My first created Webpage

Now we have written the Textual par of our website so if we want to show only this text in the given font colour and size then we need to tell the Computer that, so we now have to close the Font Tag to let the computer know that we have completed all of our Textual part of the Webpage. To close the Font We already know from the above experience that which Tag is tobe used. . . . . . Yes you got it the  Tag. so we need to add this on a new line, now the whole coding looks like :

<html>

<head>

<title>

Test Page

</title>

</head>

<body bgcolor=”Blue”>

Hi I’m a Newbie to HTML and this My first created Webpage

Now we have closed all the Tags but the Body and HTML Tag is still open, now as the the Body Construction of our Webpage is completed therefore we can now close the Body tag by using </body>. And after that we need to close the HTML Tag finally to complete the whole Coding, as I already mentioned erlier that the order of closing Tags is oppsite in the order of Openning Tags thus as the HTML Tag was opened at first and way before the Body Tag, so the HTML Tag must closed at last and after closing of the Body Tag. So Now Our Codings should look like this in the below :

<html>

<head>

<title>

Test Page

</title>

</head>

<body bgcolor=”Blue”>

Hi I’m a Newbie to HTML and this My first created Webpage

</body>

</html>

Now our Coding part is fully Completed, now we need to save it and complile it in a HTML Format. To do so just go to Save As from File Menu, and then give a suitable Name of the File and just add .html extension to it, like Code Testing.html and then in the File Type Options from the below select All Files and then Click On Save Button thus saving the file. Now close all the open window and go to the location where you saved the file and run it by Double Left Muse Button Clicking on it.

Now You see How to create a Webpage in HTML, it’s really easy isn’t it. Hope This article was good enough to make you learn. This was just a basic and the most simple HTML Coding, On the Next Article I will discuss about How to Add Images, Music into Your HTML Webpages and How to Insert a Link (Creating Hyperlink) in HTML.

If you find this article to be Helpful or if you have any Suggestions or Questions Please Do leave Your Comment(s), Any Comments will be highly appreciated. Wish You A Good Day.

How To Create Webpage in HTML Tutorial

Follow Techno Genome at :-

LinkedIN

Twitter

Facebook Fan Page

Google Plus

2 Comments

Submit a Comment Cancel reply