How To Make Website

Step 1: Set up hosting and domain name registration

What is a domain?

Let's take a look at the following URL as an example: http://www.how-to-make-website.com /
The part of the url that is shown in bold is the domain name for that website.

How should I go about choosing my domain name?

Your domain name should be short and easy to remember (for times when you'd like to tell people about your website by word of mouth). Once you choose a domain you will have to make sure it is available and not already taken before you can register it. Don't worry -- the registration part comes easy once you choose your web host.

Ok, I understand the whole needing a domain thing, so what's this web hosting stuff about?

First of all, a web host is a company that will provide a "web space" for your website for a small monthly fee. In order for your website to be accessible to others online, it needs to be hosted on a web server. Think of a web server as a super computer that will store all your website content and make it available on the Internet for you.

Here is a chart of some of the afforable hosting companies I would recommend:

Web Host	Lowest Monthly Price (prices change for different promotions, visit site for latest pricing)	# of Free Domain Names	Amount of Disk Space	Credits Included
PowWeb	$3.88	1	Unlimited	$75 Yahoo, $75 Google
BlueHost	$6.95	1	Unlimited	$25 Yahoo, $50 Google
WebHostingPad	$3.95	1	Unlimited	$25 Yahoo, $25 Google, $25 MIVA

Once you decide which host you would like to go with, visit their site from the link above and sign up for a web hosting package. You will also be able to set up your domain with your web host at that time.

Step 2: Design and Build Web Pages

Now that we have our domain name and web hosting out of the way, we can focus on building the web pages for our website.

So, what exactly is a web page?

Every website is made up of a collection of web pages. These web pages are simply HTML files.

So, what exactly is HTML?

HTML stands for Hypertext Markup Language, and basically it is the foundational language to creating a web page. HTML is what you use to format your web page content. Things like the font and colors you use for your text, the layout of the page, the images in your content and where they are placed on the web page, adding links to your web page, and more.

There are several HTML elements that we use to accomplish these things. Essentially, the way HTML works is to take regular text and put tags around it that will tell it how to be displayed. The following image shows the structure of how HTML container tags are used. Basically, we have a start tag and an end tag. All tags open with a "<" character and close with a ">" character. Notice the difference between the end and start tags -- the end tag has a "/" right after the opening of the tag.

Now let's say for instance, we wanted to put the text "Welcome to My Website" on our home page. Now let's say, we wanted it to display in bold. Essentially, we need a way to tell our web browser (like Internet Explorer) that we want this particular text to display in bold. This is where HTML comes in -- HTML uses tags to communicate this kind of formatting to the web browser. With that in mind, here is an example of using HTML to make our text show up in bold:

Now let's look at the same example again -- this time in relation to the structure of HTML container tags.

Now that we understand a little bit more about what HTML is and how HTML tags are used, let's look at a what a complete HTML file looks like. Every HTML file has two main parts -- the head and the body.

The head part is where the title tags will be placed -- the title tags tell the browser what text to display at the top of the browser window. The body part is where all web page content will be shown.

Ok, starting to understand HTML now, so what does it have to do with web pages again?

For understanding web pages, it is important to understand what HTML is and how it's used because HTML file = a web page. An HTML file can be created from a simple plain text editor like Notepad. See the HTML file example below. The example shows the main tags that are needed for every web page - html, head, and body. Inside the head tags you will find another set of tags -- the title tags. Inside the body, there is some content starting with the statement "Welcome to My Website" which is inside of bold tags (this is the example tags you were shown earlier).

Once we have an HTML file we can then open it in a web browser (like Internet Explorer) and view it as a web page. Follow the steps below to see how to do this.

Step 1) Open up a text editor like Notepad and copy the following text that you see in the grey box and then paste it in the text file.

<html>
<head>
<title>Web Page Title</title>
</head>

<body>
<b>Welcome to My Website</b> This is the body of the web page, where all content should go.
</body>
</html>

You should now have something similar to the following:

Step 2) Now we need to save the file. If you are using Notepad, you will need to go to File -> Save As... as shown below. Give the file any name you would like but make sure you save it with a .html extension. For instance, you could name it something like "webpage_example.html". Also, make sure that you remember where you are saving it to.

Step 3) Now open a web browser like Internet Explorer. Then go to File -> Open... as shown below. Locate the HTML file you just saved and open it.

Step 4) And Voila! You will now see the HTML file we made as a web page in your web browser.

What is the purpose of the index.html?

Every website will have an HTML file called "index.html". This file is the "home page" of every website. Every time a website address like "www.how-to-make-website.com" is typed into the website address box of a web browser (like Internet Explorer) and the website shows up -- what it's showing you is the web page index.html. Then from this home page, you can put links to get to other web pages in your website.

What kind of things are addressed when building web pages?

When we get ready to build web pages for a website, these are the things we have to think about:

Web Page Layout and Navigation
Sitemap
Design, Formatting and Colors

Web Page Layout and Navigation

The term navigation is used to describe how a website's pages are accessed throughout the website. For instance, if the user is on the home page of a website, how do they get to the other pages? Naturally, we set up links for the user to click on to get to the other pages within our website. But how do we group and place these links throughout our web pages?

When it comes to web page layout and navigation, there are two common layouts used within web pages: the layouts that put navigation links horizontally across the upper part of the page and layouts that put navigation links stacked vertically against left side of the page. Another common practice is to combine both of these layouts for a second-level navigation.

Sitemap

So how do you decide what kind of navigation layout you want to use for your website? Well, first you have to figure out things like how many web pages you will have and how you want to organize them. One of the things that will help us plan this is to use a sitemap. A sitemap is a sort of structure diagram that is used to show the way the web pages in your website are mapped (or linked) to each other. A sitemap should have a box diagram to represent each of your web pages.

This first sitemap example represents a website that has four pages: Home page, About Us page, Services page, Contact Us page. The web page example is showing us what the About Us page from the Sitemap example might look like.

The second sitemap example represents a website that has the same main web pages as the first example, with an additional three pages. These pages are: Our Mission page, Background page, Our Location page. The links to get to these pages will be seen when the user goes to the About Us page. That's why the sitemap below shows the pages as linked to the About Us page.

Design, Formatting and Colors

Now of course, we all want our web pages to look "pretty". That is where the design part comes in. This will involve things like: what kind of font we will use, what colors we will use, what our web page headers will look like, etc. There are a few ways you can approach this:

You can create your own designs and learn HTML to apply your design to the web pages.
You can create your own designs, but instead of learning HTML, you can get a WYSIWYG (What you see is what you get) HTML editor software to do the HTML part for you.

You can buy design templates, instead of creating your own design, and either learn HTML or get a WYSIWYG editor to implement the template and just add your own content.

Step 3: Upload/Publish Website

Once your web pages have been designed and built, the only thing left to do is to get them published for all to see!

What does it mean to upload or publish a website?

This means that your web page files will be copied from your computer (where only you can see them) to a "super computer", also known as a web server, where every one else online will be able to see your website using your website address (www.yourdomain.com).

Great so, how do I upload/publish my website?

You have two choices:

You can use the resources your web host has to upload your files.

The way to do this will vary from web host to web host, but every good web host will provide you "how-to's" for these kind of tasks. If you need further help you can always contact the support center for your web host and they will gladly walk you through the simple process.

You can use an FTP (file transfer protocol) program to upload your files yourself.

This is an example of a free FTP program:

Now, it may look like there's a lot going on in that screenshot, but don't worry, it's actually pretty simple. The first thing you need to do is find out your ftp username and password. You should be able to find this from your account management section of your web host's website. If you can't find it, contact the support center and they will gladly help. Just let them know you want to know how to find out your FTP username and password. Once you have this information, you can establish a connection. Look at the very top of the screenshot where you have fields for "Host", "Username", and "Password". In the "Host" field, enter your domain name -- like "yourdomain.com", and then fill in the username and password you retrieved earlier. Then click on the "Quickconnect" button.

Now that you've established a connection, let's take a look at what all those windows showing files mean. The basic break down is that on the left side, all the files represent your local files. The local files are all the files on your computer. On the right half, you will see all the remote files. The remote files are all the files on your web host's server or "super computer".

When you transfer a file from your local site to your remote site, it is considered an upload. When you transfer a file from your remote site to your local site, it is considered a download. With that in mind, in order to get your website online for all to see, you need to upload all your files to the remote site. Therefore, we are using this FTP program to allow us to do that. What you will need to do is locate all your HTML files, image files, and any other files that you will need to transfer so that everything to show up as it should on your website. Use the left side file view of this program to locate those files. Then, for these files, right click on them, and then select upload. This will begin the transfer. Make sure you have uploaded all the files needed. Once this is done - pull up your web browser and type your website address like "www.yourdomain.com".

Now everytime you want to make any kind of change or update to your website, you will have to make the changes to your web pages on your local computer and upload them again using either of the two processes mentioned above.

And that's it! Your first website! Woohoo, Congrats!

How to Make a Website

How to Make a Website - Step By Step

Use a Website Builder

Resources and Related Links