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
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".
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:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
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.
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.
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
That is the full path to the file on your computer.
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.
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.
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".
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".
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.
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>
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
<p>This is my 2nd page.</p>
Your website will now have a second page that we can link to from the first page.
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>
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.
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.
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.
<style media="screen" type="text/css">
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:
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.
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.
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: