HTML Tutorial: How to create/make simple web page and website

In this article we will learn how to create a simple web-page, You can create any number of pages like this and can link them via '<a>' tag for example <a href="link of another page">Link Name</a>. We need to have an basic understanding of HTML and CSS (optional), The basic blocks (I mean tags) which are the constituent part of every webpage opened through any browser are shown below.

<html>

<head> 

<title> </title>

</head>

<body> 
</body>

</html>

This code is the major parts of every webpage and whatever be content written between them is a functional part of any webpage. Now, we will see the code that will divide webpage into various segments like Header, sidebars, content area, footer, navigation bar. See the code below and Notice that we are defining " Id="" " with with some attribute name that will be used in CSS.

<html>
<head> 
<title> Title of Webpage</title>
</head>

<body> 
<!-- Now we will divide the webpage into different sections using division (<div>) tag  while definning " id="" " in them-->

<div id=header> This will create header part </div>
<div id=left_sidebar> This is for left Sidebar </div>
<div id=content_area> This is for central part </div>
<div id=right_sidebar> This is for Right sidebar </div>
<div id=footer> This will generate footer section </div>

</body>

</html>
Image courtesy: http://blackandwhitewebs.com/sites/default/files/layout.png
Image courtesy: http://blackandwhitewebs.com/sites/default/files/layout.png

Now, we are going to write css to set the position, height, width, border and color schemes of every section that we have created using "<div>" tag. You can make the necessary changes in this css file to make run according to your choice. See the code below and notice that names having an "#" sign before in css are referring to the tags in webpage that have an attribute id with the name that is after the "#" sign and names without "#" sign in css are referring directly to tags.

Like the div tags used above you can create as many sections that you want, but while creating new div tags please make the necessary changes in css to make it visible correctly on webpage and please be sure of the order of these sections.

body {
width: 960px;
margin: 0 auto;
}
#header {
height: 100px;
clear: both;
background-color: green;
}
#left_sidebar {
width: 100px;
float: left;
height: 200px;
background-color: yellow;
}
#right_sidebar {
width: 100px;
float: right;
height: 200px;
background-color: yellow;
}
#content_area {
width: 730px;
height: 200px;
background-color: red;
}
#footer {
height: 100px;
clear: both;
background-color: green;
}

You can either save the above CSS in any external file with ".css" extension or may paste it in on same webpage in the head section while using "<style>" tag. But I recommend u to save this in external file and include that onn every webpage as like shown below:

<head>
<title>webpage title</title>

<link href="link of the css file" type="text/css" />

<style type="text/css">
You can write or copy and paste above written code here (in between style tags).
</style>

</head>

lI hope this article is simple and easy to understand with the basic requirements of webpage. Thanks to Luke-L for asking me to write an article on this.

All the code written here is directly typed on Hubpages editor based on my knowledge, if any error occurs, please report that in comment section.

More by this Author


Comments 10 comments

R Saraswathan 6 years ago

Dear Shri! Amazing stuff. You know I am a self taught programmer! What I struggled to learn and master for a long time has been so beautifully presented by you. I am sure the non-tech blogger community would be very grateful to you for this excellent gift. I request you to continue this great effort by adding subjects like ASP (Active ServerPages), PHP also for which I will be personally grateful to you. God Bless you.


R Saraswathan 6 years ago

Incidentally kindly correct the code in line "06" of last HTML example. It should be and not .


R Saraswathan 6 years ago

Oops! HTML code doesn't appear, I forgot. The style type should be text/css and not test/css in line 06 of last HTML example.


itech profile image

itech 6 years ago from New Delhi, India Author

@saras ji,

Thanks sir for your precious comments and suggestion, feeling Great to see u here.... I will correct that code Now, it was an typing error...


Lady_E profile image

Lady_E 6 years ago from London, UK

Thanks for sharing this. It's useful to know.


Deepak Sharma 6 years ago

hEY FRND...GOOD WORK..!!! CHEERS


danishpage profile image

danishpage 5 years ago

Good Job! CSS was a small problem for me in the begining, but once I got the hang of it, it saved me a lot of time. Templates were also a great deal of help! Cheers!


chefsref profile image

chefsref 5 years ago from Citra Florida

Thanx Itech

I'm just learning HTML with the hope of starting a web site, you write may be useful info. I'm using Hubpages as a place to park info while I learn some new skills, any hints you might provide on my pages will be welcome

Lee (chefsref)

Voted up and a new follower!


itech profile image

itech 5 years ago from New Delhi, India Author

Thanks for commenting Chefsref.


InduswebiTech profile image

InduswebiTech 4 years ago from Rama Road, Kirti Nagar, New Delhi, India

thank you sharing this precious information to us.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working