Scared? Let's Make Your Own Website Together

Your first day in school. You walk into the classroom wide eyed and slide behind your desk. Waiting for class to start you look around at the walls and notice they are covered with letters and numbers. Fear strikes - how will I ever learn all that mambo-jumbo.

If you have never made a website before you probably feel the same way now. Looking at a website you think to yourself - I could never do that. The fear only grows when you see the html code behind the website.

But just like your childhood fear of letters and numbers has disappeared, so can your fear of websites and html. It looks confusing only because it is new.

Making a website and understanding HTML is not as difficult as it may seem. If you were able to learn the alphabet then you can learn HTML. All you need to do is buckle down and do it.

If You Were Able to Learn the Alphabet You Can Learn HTML

People learn by example. Your teacher writes an ‘A’ on the board and you copy it down in your notebook. The teacher writes ‘B’ on the board and you write it down. In a couple months you know the entire alphabet, in a couple months more and a crayon you can write your name on kitchen wall.

Same principle applies for websites. Start simple, take small steps, learn by example and in no time you will be creating your own website.

Let's make a website together. We will start small and simple. You will see from start to finish how a website is made. You will see how easy it is. You will see that there is nothing to be afraid of.

All You Need to Create a Website is a Text Editor

You are probably scared of making your first website because you assume a bag full of tools and services is required. You think you need a special HTML editor, a domain name, hosting services, ftp client - there are so many things you do not know where to start.

But actually you do not need any of that to make a website. All you need is a plain text editor like Notepad. At their core websites are just text.

In this tutorial Microsoft Notepad is used to create the website. Of course if you want to follow along you can use any text editor you want. But avoid using a word processor because they usually add extra characters in the background that you do not see and this might cause your website to malfunction.

Don’t be Scared - Lets Make a Website

Below we are going to make a website. Step by step we will go from blank page to a working website. You will see that there is nothing to it.

The website in this tutorial will not win you awards, but it is a simple introduction that will eliminate your fear and belief that websites are a mysterious black box which only computer scientists and 13 year old kids can understand.

Step 1  - Open Notepad and make a HTML page

  1. Open Notepad
  2. Save the blank file as 'index.html'  (File -> Save As)
  3. Make it a HTML document by typing <html> at the beginning of the file and </html> at the end of the file.
<html>


</html>

All HTML tags have the same structure: <tag>something</tag>

Step 2  - Break the page up into sections

  1. Break the pages up into two main sections: head and body.  In the head will be information about the page, like the title.  The body will contain the content of the webpage.
  2. Break up the body section into sub sections: banner, navigation bar and content.  The banner will be our website logo.  The navigationbar will be links to other pages on our website.  And the content will be the words on the page.

<html>

 <head>
 </head>

 <body>

    <div id="banner">

    </div>

    <div id="navigationbar">

    </div>

    <div id"content">

    </div>

  </body>
</html>

The <div></div> tags are division tags.  They are used to create sections on the webspage. So that we can reference these sections later we give them names like banner, navigationbar, and content.

Step 3  - Put a Title in the Header section

  1. The header section is for information about the webpage.  There are many things you can add into this section.  But to keep it simple we will only add a title.
  2. Create title tags in the head section and write a descriptive title.
 <head>
  <title>A Website Created With Notepad</title>
 </head>

The title in the header tags is what will be written in the top bar of your browser window.  For example, if you look at the top bar of your current browser window you will notice that the title of this page is 'Scared? Lets Make Your Own Website Together - How This Website Makes Money'.

Step 4  - Add an image and website name in the Banner

  1. The banner is usually at the top of the website. It is the most visible part of a webpage. Usually you put the name of the website and your logo in the banner section of the website.
  2. Add an image of your logo.
  3. Add the name of your website.
    <div id="banner">
      <img src="../images/createhtmlwebsite/logo.jpg" />
      <span id="bannertext">A Website Created With Notepad</span>
    </div>

To insert an image use the <img> tag. The tag has a property called src in which you enter the path of the image. I have created a logo and for this website and put it in the /images/createhtmlwebsite/ folder and called it logo.JPG.

The <span> tag is used to group a set of words. In this example we are going to group together the bannertext so that we can reference it later and change its appearance. Later we will make the bannertext big and add some color - after all it is the title and should be big and shiny.

Step 5  - Add a Navigation Bar that links to other pages on your website

  1. A navigation bar is a set of links to main sections of the website. Usually navigation bar has links like , About, Products, Contact
  2. Create a list with links to each of the main pages on the website
    <div id="navigationbar">
      <a href="about.html">About </a>
      <a href="product.html">Product </a>
      <a href="contact.html">Contact</a>
    </div>

To make the navaigation bar we use the <a> tag to create links to the other pages on the website (we have not created the other pages). The tag has a property called href which is set to the page that you want the link to go to. For this example we are pretending that our website has pages called about.html, product.html, contact.html.

Step 6  - Add content

  1. Content. It is what your website has to say to the world. Here you write what ever you want to write.
  2. Create a headline for the page
  3. Write a couple paragraphs of text.
    <div id="content">
      <h1>How To Write Content in Paragraphs</h1>
      <p>Writing the first paragraph is easy.</p>
      <p>The second paragraph has a <strong>bold</strong> word.</p>
      <p>This one has <i>italic</i> and <u>underlined</u> words.</p>
    </div>

The biggest heading on a page is the <h1> tag. This tag is usually used and once of every webpage to describe what the page is about.

Use the <p> tag. To create paragraphs.

Placing tags around words can change their appearance.

Step 7  - You're done. Have a look at the finished website

  1. That is it. You just made a website. Of course is only has 1 page, but you have to start somewhere.
  2. Have a look at the entire website.
<html>

 <head>
  <title>A Website Created With Notepad</title>
 </head>

 <body>

    <div id="banner">
      <img src="../images/createhtmlwebsite/logo.jpg" />
      <span id="bannertext">A Website Created With Notepad</span>
    </div>

    <div id="navigationbar">
      <a href="about.html">About </a>
      <a href="product.html">Product </a>
      <a href="contact.html">Contact</a>
    </div>

    <div id="content">
      <h1>How To Write Content in Paragraphs</h1>
      <p>Writing the first paragraph is easy.</p>
      <p>The second paragraph has a <strong>bold</strong> word.</p>
      <p>This one has <i>italic</i> and <u>underlined</u> words.</p>
    </div>
  </body>
</html>

Here is the what the completed website looks like in a browser: A Website Created With Notepad

Make Your Own Website

Here is your chance to make your own website. Just fill in the blank areas and hit the button.

<html>

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

 <body>

    <div id="banner">
      <img src="" />
      <span id="bannertext"></span>
    </div>

    <div id="navigationbar">
      <a href="about.html"> </a>
      <a href="product.html"> </a>
      <a href="contact.html"></a>
    </div>

    <div id="content">
      <h1></h1>
      <p></p>
      <p></p>
      <p></p>
    </div>

  </body>
</html>

Easy.  That is all there is to it. Think your ready to make your own website...try The Website Starter Kit.

If you enjoyed this website, please share. Thank you.

If this website has helped you, or if you believe in Karma, or most importantly if you want me to feel good:

Thanks!

Roman

My name is Roman and I want to provide you with an honest account of what it takes to make money with a website.

When I started this website in January 2009, I thought I would be rich by May.  I was wrong - really wrong. 

At the beginning I did not know anything about websites, SEO, blogs, and how long it takes to make money with a website.

Since then I have learned a lot. By revealing my journey I hope this website will help prepare you for yours .

Feel free to contact me with any questions or comments and visit my Google+ page.