ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on November 9, 2011

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.

Comments

    0 of 8192 characters used
    Post Comment

    • InduswebiTech profile image

      InduswebiTech 

      6 years ago from Rama Road, Kirti Nagar, New Delhi, India

      thank you sharing this precious information to us.

    • itech profile imageAUTHOR

      Krishna 

      6 years ago from Dausa, India

      Thanks for commenting Chefsref.

    • chefsref profile image

      Lee Raynor 

      6 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!

    • danishpage profile image

      danishpage 

      7 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!

    • profile image

      Deepak Sharma 

      7 years ago

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

    • Lady_E profile image

      Elena 

      8 years ago from London, UK

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

    • itech profile imageAUTHOR

      Krishna 

      8 years ago from Dausa, India

      @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...

    • profile image

      R Saraswathan 

      8 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.

    • profile image

      R Saraswathan 

      8 years ago

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

    • profile image

      R Saraswathan 

      8 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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)