How to Make an HTML Website From Scratch
STOP! Even though you can create your site on your computer for free, you cannot launch your website until you have a domain name and hosting.
Yes, there are places to get free websites but you don't own them and they are harder to get ranked in Google.
Never, ever make the mistake of creating a free website like I did years ago. It was one of my biggest regrets.
OK, enough about me. Let's get on with the tutorial...
All You Need is a Computer and Notepad
If you create a static HTML website, you don't actually need any software. You can make the site right from your computer for free using Notepad or TextEdit (Mac).
WAIT! If you're not interested in manual creation, skip here to learn more about WordPress and other website creation options. Or if you want to take course on manual creation, click here.
Creating a Basic HTML Web Page
Open your text editor and insert the following code. Just copy and paste the info below into your empty file.
Now Save As and make sure you select All Files under "Save as Type" and save the file with an .HTML extension so it looks like index.html. This is going to be your homepage.
Now open this file with any web browser and you should see a clean white page that says This is the body of your website.
Believe it or not, that is all you need to create a basic web page. Now, of course it's going to be incredibly plain and unattractive, but you get the idea.
Notice the line that reads "Search Engine Title Goes Here." That is the title that the search engine displays when your site is listed and ranked in Google, Bing, etc.
This is where you want to insert the phrase that you are trying to target and get ranked for. Be sure to check the link above for help on search engine optimization.
Adding CSS
Now to jazz up your page, you'll want to use CSS. This stands for Cascading Stylesheets and it's a very good way to make sure you use consistent styles throughout your website.
It also makes it easy to update your fonts, colors, etc. across all your pages at once.
Don't worry. I know it sounds complicated but I'm going to give you the code and you'll see how easy it is to tweak it.
To create your stylesheet, just open another blank text file and name it style.css. Be sure to save it in the same location (folder) on your computer as your homepage file.
Now add a line before the </head> in your HTML page that reads...
<link rel="stylesheet" type="text/css" href="style.css">
So the code for your index.html page will now look like this...
This tells the browser to look for the stylesheet when loading the web page.
Creating a 2 Column Web Page
Now, let's create a 2 column page using CSS. Below is the code you will paste into your style.css file.
Notice there are 5 sections to your website...
1) Container
2) Header
3) Sidebar (left column)
4) Content
5) Footer
Most of the sections are probably self explanatory. The Container is the area that holds your site.
If you want the entire width of your site to be 1000, you would change the 900px to 1000px. Just remember to change the size of the rest of the variables so everything aligns.
And the stylesheet defines the width and other variables for each section. If you want to change the background color of the body, you would change #ffffff to another color.
Take some time to tweak the stylesheet how you want it.
So now you can add the following code to your filename.html (homepage) and replace <p>This is the body of your homepage</p> with this...
So here is your complete homepage code...
This tells the browser to read the style from your style.css file. So each section of your site will use the styles provided in your stylesheet.
Now when you open your homepage, you should see something like this...
You can adjust the section widths, heights, colors, etc. in your stylesheet to get the look you want.
Adding Font Styles
If you don't add any font styles or sizes, the browser will just display the person's default fonts on their computer (usually Times New Roman).
However, with CSS you can tell the browser what font style and size you want for each section of your website.
So if you want the paragraph text in your content area to be 14px and use the Arial font then you would add the following code to your stylesheet right after the #content section.
#content p {font-family: Arial; font-size: 14px}
So your #content area should look like this now...
Now anytime you add paragraph text (make sure you surround your content with <p> and </p>), it will take on the style you identified in your stylesheet.
Changing The Link Colors
By default, links are blue, but you can follow the same format above and change the color to whatever you wish.
So if you want your links to appear red in your content area, you would add this to your style.css file...
#content a {color: red;} or you can use the hex value and declare it like this...
#content a {color: #ff0000;}
The a represents the link color. Now when you add a link to the content area using this code...
<a href="http://www.website.com">This is a link</a>, the link will be red.
Rinse and Repeat
So now that you know a little bit about creating styles for your stylesheet, you can apply this tutorial to any section of your site.
That means if you want to change the font color and size of your header, navigation, footer, etc. just follow the example I used for the content section.
Check out some more html templates you can download.
Want a More Advanced Course?
This page covered the basics, but if you want to really step up your web development skills, consider taking a course. This is one of the most popular web development courses online. You can sign up here.
How to Publish Your Site to The Internet
Once your website has been created, you need a web host to publish it to Internet for the world to see.
In order to do that you must register your own domain and select a web host.
Then you can FTP (upload) your pages up to your site. However, if you use WordPress (below) you won't need to do any of that because it has its own publishing platform built in.
Other Creation Options
If you are not into manual website creation, there are other ways that will not require you to tweak so much code or manually upload pages.
1) Artisteer is a design tool that will help you build a website by using a very user-friendly interface. You simply tweak the pre-loaded templates and no coding is needed.
This is definitely for people who don't care to learn much about HTML and would rather spend time working in a more visual mode.
Here's a video on Artisteer here...
2) Dreamweaver is another option, although this software is more advanced and assumes you want to learn HTML and CSS. I used Dreamweaver to create this site.
3) WordPress is a dynamic platform for creating blogs or websites with comments and other functionality.
It comes with templates so you don't have to create your own, and the plugins will help you do so many different things with ease.
Learn more about WordPress here.
A Note About Multi-Column Websites
Years ago, 3 column websites were all the rage because they gave the website owner more real estate for advertising and more.
However, times have changed with the trend moving toward simplistic designs.
Learn why you may want to limit the number of columns in your website's design.
Learn website development in just 6 weeks!
If you liked this, please share. Thanks!
Hi, my name is 