Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

Tutorial Top 10 Steps To Create Your Own Html Website!!

Discussion in 'HTML Coding' started by Manish Mishra, Jan 19, 2016.

  1. Manish Mishra

    Yellow Belt

    Joined:
    Dec 22, 2015
    Messages:
    1,025
    Ratings:
    +159 / -0
    If you do not know how to create an HTML website, you need not to worry. Following is an easy tutorial that will help you developing your own HTML websites with very less effort.

    All you need to have is a computer and a notepad. With these two we are going to guide a basic HTML website development tutorial.



    Creating Basic Page


    You need to open the notepad from your computer and insert the below HTML code. I suggest you to just copy and paste into empty notepad file.


    HTML:
    Select All
    <html> <head>Search Engine Title Goes Here<title> </title> </head> <body> <p> This is the body of your website. </p> </body> </html>
    Once done, save this file as index.html



    Now, open this file using any browser and you will see a clean page with text “This is the body of your website.”

    We have written, “Search Engine Title Goes Here“within the codes. It means it is the title of your website that search engines will display when you submit your website to SE’s.
    It is plain website we have created but it does not look any good. Now, we need to add some features and give colors to it.




    Adding CSS:


    For cascading stylesheet you need to add CSS, to make sure to give a consistent style. This will help you playing with colors, fonts within your entire websites and pages. In order to create your own stylesheet lets create another text file and name it as style.css Make sure this file is saved within the same folder you have saved the index.html file.


    Now let’s work on CSS part.
    We need to put it into out html web page.
    Let’s add a line before end of the head line in the HTML page. Remember end of the head means

    </head>

    HTML:
    Select All
    <link rel="stylesheet" type="text/css" href="style.css">



    Creating 2 column webpage


    In order to create the 2 column page using CSS. Lets copy and paste the code into style.css file.
    Please copy the below code before you paste:

    Code:
    Select All
    body {background: #ffffff; margin: 0; padding: 0;} a {color: #2b2bf6;} #container {width: 900px; margin: 0; padding: 0; background: #dddddd;} #header {width: 900px; height: 150px; margin: 0; padding: 0; border: 0; background: #f346e1;} #sidebar {width: 200px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #f0e811;} #content {width: 700px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;} #footer {width: 900px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #000000; clear:both;}

    [​IMG]


    Let’s decide the look of your website.
    If you want width of your website 1000, you need to adjust it to 900px to 1000px. Stylesheet is something that will define the width and other variable for each section of the website.
    Changing the color means just changing the codes.


    I will show you some example with the image below. You just need to pick the code and paste it into the file name where the code already exists as
    #ffffff to another #yourcolor (your choice of color)

    [​IMG]

    Now you need to add the following code into the HTML file that is your homepage.
    Replace the <p> with the below code.

    Code:
    Select All
    <div id="container"></div> <div id="header"><p> Header Goes Here</p></div> <div id="sidebar"><p> Left Navigation Goes Here</p></div> <div id="content"><p> Content Goes Here</p></div> <div id="footer"></div>


    By now, it tells the browser to read the style.css file that will display the entire website and its pages to the style we have provided from style.css file.

    Every time when index.html file will load; style.css file will automatically loaded itself. Index.html file will always seek the stylesheet file that we already given by putting it up into the same folder.

    [​IMG]


    Adding fonts:


    If you do not use any font style, by default it will show you times New Roman like usually every computer has default setting to use Time New Roman as font. Using CSS we can tell the browser which font and size this website need to use. If you want 14px and Arial as font then you need the following code to add to the main file.

    You need to change the content area of your CSS file then it will look as below:

    Code:
    Select All
    #content {width: 700px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;} #content p {font-family: Arial; font-size: 14px}

    You are allowed to add paragraph at any moment of time. This is an easy example of a web page. Now, you can upload it to your website folder by using any of the FTP clients.

    You can edit, modify and add some new codes always for new functions to be used; this is a good practice to get into more designing part.
    Good Luck!!
     
    #1 Manish Mishra, Jan 19, 2016 at 12:30 AM
    Last edited: Jan 19, 2016
    • Like Like x 1
    • Informative Informative x 1
    • List
  2. Swati Mishra

    Yellow Belt

    Joined:
    Dec 28, 2015
    Messages:
    644
    Ratings:
    +105 / -0
    This is really a useful post for beginner who want to create their own website. HTML is really easy to build sites, some of the applications like Dreamweaver made it more easy. You just need to drag and drop and you will have the playing of codes behind. Once you are done creating the look, columns, etc, on your page the other side have your code ready.
    Still, you have described it well and hopefully people will create their first HTML sites with the help of this tutorial.

    I also suggest beginner to read my HTML tutorial for basic knowledge, this will help them understanding of it before they go developing a website for them.
    Tutorial - A Beginner Guide To Html
     
  3. cheezcarls

    cheezcarls It's Game Time!
    Yellow Belt

    Joined:
    Dec 15, 2015
    Messages:
    976
    Ratings:
    +162 / -0
    Very well explained @Manish Mishra@Manish Mishra about creating your own basic HTML website. This is a very informative post by the way, and it will help newbies here to get started with HTML.

    I also have a similar guide right here, which is all about creating your own HTML video landing page for starters here:

    Tutorial - How To Create A Basic Html Video Landing Page For Starters

    It is still necessary to do HTML coding though, but there's always a faster way to create websites right now, and that is by using the Wordpress CMS. I admitted that it really save my time from tedious coding my own website, but still we are grateful and it all started with the traditional way to do HTML websites once and for all.
     
  4. Manish Mishra

    Yellow Belt

    Joined:
    Dec 22, 2015
    Messages:
    1,025
    Ratings:
    +159 / -0
    Thank cheez!
    I will be posting more such creative articles in upcoming days. I went little busy from last week otherwise i would have posted some more articles regarding the HTML based website development.
    Wait for my next tutorial about step by step development guide.
     
  5. SirJoe

    Yellow Belt

    Joined:
    Feb 1, 2016
    Messages:
    88
    Ratings:
    +6 / -0
    Very good, that is the basics. With that you can already make your own site, even though it will be something very basic it will be something that you created.
     
  6. Doominic anderson

    Yellow Belt

    Joined:
    Jan 30, 2016
    Messages:
    399
    Ratings:
    +21 / -0
    This tutorial gives a good knowledge to beginners who really want to build a website using HTML.
    Your way of giving step by step knowledge for website creation is appreciable, keep it up and try to share much knowledge about web designing helps beginners a lot.
    I have also learnt important things through this tutorial.
     
  7. steve taylor

    Yellow Belt

    Joined:
    Feb 12, 2016
    Messages:
    769
    Ratings:
    +25 / -0
    Very informative tutorial. HTML is not a much complex scripting language. Any body can learn it easily and they can use HTML for developing their own website. Once anybody learn basics of the HTML then they can use some tools for web page development.
     
  8. Prasoon Arora

    Yellow Belt

    Joined:
    Feb 1, 2016
    Messages:
    472
    Ratings:
    +24 / -0
    Html can also be used in creating contact forms for the website, drop down menu, customized banner and many other things. Html is the base language that may help anyone who just wish to learn how to create the website and the tutorial provided by you would help him in much more better way.
     

Share This Page