How to make a website with Notepad

In this tutorial you will learn how to make a basic website from scratch using Notepad. If you are on a Mac you need to use TextEdit.

There are other professional code editors that you can use to edit code like html

If you are on a Mac and you want something better than TextEdit, you can download Adobe Brackets which works on both Mac & Windows. I will be working on Windows and therefore using the basic version of Notepad. The code in this tutorial works in any editor so just pick an editor you like and let's begin.

Making your first page in Notepad

Windows
To open Notepad on Windows 7 or earlier, click on Start -> All Programs -> Accessories -> Notepad. You can also click on Start and search for "Notepad".

Mac
Open TextEdit and make sure the text editor is set to plain text by going to Preferences > New Document > select plain text. Next make sure to check "Display html file as html code" and "Display RTF file as RTF code" under "Open and Save".

Next copy and paste the following code into the editor:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

make a website with notepad

Saving the HTML File

Save the file as "index.html" with an HTML extension. This is very important if you don't add the .html to the end of the name, it won't work. Note: Even though .html is preferred you can also use .htm without the "L".

Set the Encoding to UTF-8, which is preferred for html files. ANSI encoding is only for US and Western European characters.

saving the html file

Opening HTML File in the Browser

Next, go to the folder where you've saved the file and open it in your browser. In this example we are using Chrome, but any modern browser should work.
NOTE: If you are having trouble opening the file, make sure you have saved it as .html.

Opening HTML File in the Browser

Viewing HTML File in the Browser

Once the file is opened in your browser it will look like this:

Notice the file path in the URL Bar
file:///C:/Users/WebsitesDIY/Desktop/HTML/index.html
That is the full path to the file on your computer.

Viewing HTML File in the Browser

Centering the Text

Now that you understand the basics of creating an html file, let's learn how to center text

Go into the html file you have created and add the <center> </center> tags around "My First Heading" like so <center><h1>My First Heading</h1></center>

Delete <p>My first paragraph.</p> for now.

Centering the Text

Save the File and reopen it in the browser again. If your browser window is still open you can simply click refresh to reload the page.

The header text should now be centered in the middle of the web page.

centered text

Adding a Youtube video to your WebSite

To add a youtube video to your website: Go to Youtube and find the video you want to add to your website.
"Right Click" on the video and "Copy Embed Code".

Adding a Youtube video to your WebSite

Pasting the Video Embed Code into Notepad

Paste the embed code into Notepad

The embed code will looks something like this:
<iframe width="854" height="480" src="https://www.youtube.com/embed/Q8AZ16uBhr8" frameborder="0" allowfullscreen></iframe>

You can change the width and height to whatever you want. Just change those numbers in the code and leave everything else unchanged. In this example we will be using a width="427" and height="240". You can set yours to whatever you want.

Center the Video by putting the <center> </center> tag around the Embed Code you've copied from YouTube.

Also, lets change the heading between the <h1>My First Heading</h1> tags to say "My Website".

center the video
centered video example

Adding a Link to another page

We will now add a link that goes to Google when people click on it.

Add the following code to your website just below the video:
<a href="http://www.google.com">Go to Google</a>

Notice how the link is centered using the center tags. Also notice the <br> tag just before the center tag - this adds a line break between the video and the link.

Adding a Link to another page

You should now see a link below the video which goes to Google if you click on it.

You can create links that go to any page that you want. Just change what's in the href attribute.

If you want to open the link in a new window when someone clicks on it, add the following attribute in the link tag: <a href="http://www.google.com" target="_blank">Go to Google</a>

link example

Creating a 2nd Page for your Website

Now, we are going to make a second page for your website and call it page2.html. This way you can create links to other parts of your website instead of linking to Google like we did earlier.

Create a new html file and add the below code to it. Save it and call it page2.html

<!DOCTYPE html>
<html>
<body>
<h1>Page 2</h1>
<p>This is my 2nd page.</p>
</body>
</html>

Your website will now have a second page that we can link to from the first page.

Creating a 2nd Page for your Website

Linking to Page2 from your Main Page

Now that we have created Page2, lets modify the link on the first page to link to page2.html

Open up "index.html" and change the URL that links to Google to link to Page 2 instead:

<a href="page2.html">Page 2</a>

Linking to Page2 from your Main Page

You are now on page 2 of your website

If you have created your link successfully you should be taken to page.html when you click on the link below the video. If for some reason your link is not working, go back a few steps and follow the instructions again. Knowing how to add links/URLs to your website is very powerful. After all the internet is just a large collection of links indexed by Google.

page 2 of your website

Adding cool styles with CSS

We are now going to style the link to page2 using CSS so it looks like a button. CSS is used to control the layout of your website.
Copy and paste the following code at the top of your index.html page just below the <body> tag. When pasting don't overwrite the other code.

<head>
<style media="screen" type="text/css">
a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
}
</style>
</head>

What this piece of code basically does is it tells the browser to add a background color and height to the link we made earlier. We also made the corners a little rounded by adding the border-radius of 10px. There are a lot of free tutorials online where you can learn more about CSS in order to make your website look really nice.

Adding cool styles with CSS

css button

Adding a hover effect to the button

One last thing we are going to do is add a hover effect to the button. The hover effect will make the button turn a different color when you hover over it with your mouse.

Add the following code just above the closing </style> tag:

a:hover {
background-color: #005170;
}

Adding a hover effect to the button

hover button example

Your website should now look like this

Your website should now look like the example in the picture. There should be a header with the name at the top, a video in the middle and a button at the bottom. When you hover over the button with your mouse the color should change to a dark blue. If your website doesn't look right it's because you probably have errors in the code. Please go back a few steps and try again. It's important to understand the basics before going to the next step where we will show how to put your website on the internet so everyone can access it.

final website

Going Live with your Website

In order for the world to see your website it needs to be uploaded to a webserver that stays connected to the internet 24/7. Now, we do not recommend setting up your own server. It's much easier to pay $3 or $5 a month to a professional webhosting provider to do this for you. I recomment using BlueHost and signing up for their Plus Planto launch your website and get a FREE domain name - this website is hosted on BlueHost and we love it. They are fast, secure and have great customer service.

Sign Up for WebHosting at BlueHost

how to get webhosting

How to Make a Website with WordPress
Step by Step Tutorial

Now that you understand the basics of making a simple web page, I want to introduce you to WordPress - the most popular website builder in the world. Wordpress is Free Opensource software - which means you can download it and use it for free on as many website as you like. I have written a complete tutorial on how to set up your website with wordpress - read it here.
In this tutorial you will learn how to:

  • Get a Free Domain Name from BlueHost
  • Set Up your Own Hosting Account on BlueHost
  • Set up your website
  • Get Premium Themes/Template From ThemeForest

    • I hope you've found this guide helpfull. If you get stuck or have questions please join our community.

how to make a website or blog