How to Make a Website Using HTML and CSS - Make Your Own Website Tutorial - Part 1

If you want to know how to make a website there are several different options available to you, building a website can be a fun but sometimes frustrating job if you are a beginner to website creation. There are two basics that anyone who wants to start a website needs, a domain name and a hosting account, once you have these two there are a multitude of options available from blogs to html sites, shopping cart sites to sell your own products, forums and so on. Whatever type of website you want to build can be achieved as long as you have the knowledge and the domain and hosting.

If you want  a step by step tutorial on how to get a domain name and set it up in your hosting account you can find all that in this hub "how to make a website with wordpress" that tutorial goes through all the steps you need to buy a domain name, set up your hosting and install wordpress (wordpress is mostly used for blogs but is a simple way to start a site and get set up quickly). If you want to learn how to build a website using html then simply follow the first two steps in that article and then come back here to find out how to start your very first site and begin learning html and css.

Note: This tutorial is a continuation of my other article so assumes that you are using hosting that offers cpanel, which we will be using to upload files to our site.

I talked about this in my other article (see link above) and the short answer is to build and publish your own website will cost about $100 per year. That is for your domain name and hosting.  Apart from that initial cost to create a website there is no need for any additional software.  What you will need is a html editor, there are many different types available from the top end editors like dreamweaver (very very expensive) to low end like the coffeecup html editor ($49).  There are also many free html editors available online too, this tutorial is going to show you how to build a website from scratch using notepad which is already installed on your pc (text edit on mac).

I am going to show you step by step how to build a small site and get you used to the basics of using html and css (cascading style sheets).  Once you know this you can expand your site to hundreds of pages if you so wish.

The very first thing you need to do is to create a new folder on your desktop, call it whatever you like, for this tutorial we will call it "my first site". Inside this folder you should add another new folder and call it "images".

Making the pages for your website

• The next thing you need to do is open a new blank page in note pad and save it into your new folder as "index.php" This is going to be the home page of your website.
• Open another blank page and save this one as "style.css"
• Open a third blank page and save as "template.php"

For now this is enough to make a one page website. Of course you will want more than one page and we will be adding more pages later on.

Creating a website from scratch may seem complicated and to do so you will need to learn basic html and css.  A standard html page or document includes two types of content:

• visible content - what the visitor to your website will see when they visit your site, and
• invisible content - what the web browser will read when it comes to your site.

There are three parts to a basic html document:

• the DTD (document type definition) this describes the HTML version of the document (invisible content)
• Head Section - this contains information on about the document, page title, description and keywords etc
• Body Section - this is where the content that is visible to visitors is added.

Every page must include the three sections mentioned above, the first step is to create a basic template that includes these three parts that you will then use to make every page of your site. You do not need to understand the DTD but you must include it.

Open your "template.php" in notepad, copy and paste the below code at the very top of the document, this is the DTD.

............................................................................................................................

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

............................................................................................................................

After the DTD you will add the head section and the body section, both of these sections are inclosed in html tags, copy all the code below into your template document, under the DTD

............................................................................................................................

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

</body>

</html>

............................................................................................................

As you can see, opening tags use the greater than and less than symbols to enclose the tag <tag> and closing tags use an extra forward slash like this </tag>

Save your template.php

If you were to upload your index or template file to your website right now all you would see is a blank page.

Now you are going to add the information you need to the head section of your document. This will include the title of your page ( this is not the title that will display on your page but the title that will show in the top bar of your browser) as well as the page description and keywords as well as any references to stylesheets etc. The first piece of code to add here goes directly under the <head> tag, it is a meta tag that describes the content type, if you want to know more about content type visit W3c here. It is not necessary for the purpose of this tutorial to understand more about the content-type except that you must include it for your site. Copy this code under your <head> tag in your template file.

........................................................................................................

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

........................................................................................................

Underneath the content-type you are going to add title tags. Simply type

<title>Your Page Title</title>

If you uploaded your site now you would still have a blank page but the page on the top of your browser would display "Your Website Title"

Next we are going to add some space for page descriptions to your template file. Directly under your title tags you will add some meta tags. Meta tags do not require to be closed like your </title> tag. Type the following under the title tags

<meta name="keywords" content=" add your page keywords here"/>

<meta name="description" content=" add a short description about this page here"/>

This will allow you to add a description and keywords to every page you make in your website. On each page you can add different keywords and descriptions relevant to that particular page.

The last thing we are going to add to your head section right now is a link to your style sheet, type:

<link href="style.css" rel="stylesheet" type="text/css" />

See example of what your page should look like in the image below.

This is where it starts to get a bit more interesting, you are going to start adding content to your home page.  Do not add content to your template.php.  

Open up template.php and copy all of the code, paste the entire code into your index.php file.

The next section we are going to edit is the area between the <body> </body> tags.  Directly underneath the opening <body> tag add a heading tag.

<h1>My Home Page</h1> 

There can only be one H1 tag per page, it is the most important heading tag and is where you should enter your page title.  Next you can add some sample content. to add a paragraph of text under your H1 heading use <p></p> tags.

For example: 

<p>Welcome to my first website, This is the home page of my site.</p>

To add an unordered list use the list tags like so:

<ul>

<li>item one</li>

<li>item two</li>

<li>item three</li>

</ul>

You can add as much content as you wish 

<p>Thank you for visiting my first website</p>

The images below show what your code will look like now and how it will display if you uploaded it to your website now.

You site is looking very basic right now because we have not yet added a style sheet. It resembles a simple word document. By copying your template.php and following the above steps you can make as many pages as you want for your site. For practice you can try making an about us page (save as "about.php") and a contact page ("contact.php") exactly as you made your index.php page.  Copy all the code from your template, insert a title, description, keywords and add content to the body section.

In the next part of how to make a website we will be adding a style sheet so that we can give our website a header area, content area, sidebar and footer.