HTML Tutorial: How to create/make simple web page and website
By itech
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>
Related Article
- how to make your website
You can easily build your own website with just basic knowledge of HTML and CSS. you don't need to be a professional and doesn't require kind of diploma/degree in it. CSS can also be considered as an optional part in designing your first website but
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>
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.
Comments
Incidentally kindly correct the code in line "06" of last HTML example. It should be and not .
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.
@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...
Thanks for sharing this. It's useful to know.
hEY FRND...GOOD WORK..!!! CHEERS
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!
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!
Thanks for commenting Chefsref.
thank you sharing this precious information to us.
R Saraswathan 23 months 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.