Building The Simplest Web Page Using Notepad

Current Progress
Current Progress
Current Progress
Current Progress

Introduction

Okay, so in this lesson, we're going to build a very simple web page using Microsoft Notepad (or equivalent if you are on a Mac). Now, please don't be terrified by this because I'm definitely not expecting you to build all your webpages in Notepad! This is pretty much a one-off simple exercise that will very powerfully help you understand some foundational concepts about websites and web pages. I really want you understand because it will help you when you are troubleshooting, installing tracking scripts such as the Facebook pixel and Google analytics amongst others. You will see that whilst websites can be incredibly complex (e.g. Amazon, Facebook, eBay etc.), they all follow some basic similar principles. As you progress with your online business, you’ll probably be using WordPress (I cover this in the later lessons) and maybe a drag and drop editor, such as Thrive Shapeshift.

More likely still, you will also be outsourcing so that work is done for you. Understanding the basics will go a very long way towards helping you understand how things work and help you specify work for others.

We’re going to build a web page, view it in our web browser on our computer then upload it to a web server and view it there in your browser also. For this exercise, we can just build the web pages and view them locally on your computer. However, to get the full benefit, you will need a domain name and hosting account where we can upload the web pages. The domain needs to be empty – by that I mean no WordPress installation. You will need access to a file manager within your hosting account – hosting companies provide this in different ways, some use cPanel, others provide their own file manager. I am going to show you on a domain hosted on Siteground, my preferred hosting provider.

Building a Webpage in Notepad

1


On your computer, create a folder in a convenient location – we are going to store some files in there. These will be web page files and we will use a plain and simple text editor such as Notepad.exe – I want to make this as plain and simple as possible.

I have created a folder inside my desktop folder as you can see above.


2

Now, whilst you’re in the newly created folder, right click to see:

3


And select New -> Text document.


4

Name it index.html –

index.hmtl is the standard name for a website’s home page – the page that loads when the url is in its simplest form such as www.websitename.com – soon we will see that we can use: www.websitename.com/page-name.html.

Note that www.websitename.com and www.websitename.com/index.html resolve to the same thing and when you enter: www.websitename.com/index.html in your browser and hit return, it will just display www.websitename.com. 

index.html is the home page for your website from which other pages may be linked.

5


When you hit return you should see:

Windows sees the .html file extension and identifies the file as a web page – I have Google Chrome set as my default web browser, you will see a different icon if you’re not using Chrome. Actually, this is a good time to suggest that you install Google Chrome as I use it throughout the course. Also, you will discover that Chrome is optimised to work well with all your Google products such as Drive, Docs, Forms. Despite supposed standardisation across web browsers, they all do their own thing!


6

Now, right click the file again and select Open with -> Notepad:

You should see an empty Notepad!

7


Now, we need to add our HTML to create a web page.

At this point, I want to remind you again of a fantastic website W3 Schools, which is another resource for learning more in depth HTML, CSS, JavaScript and many other topics. The great things about it is that you can try out ideas right there on the site.

I want you to copy the following code (highlight then ctrl-C) ready to paste (ctrl-V) into notepad:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Now Save the file (File -> Save or Ctrl-S).


8

Go back to your file manager:

9


And double click index.html – you should see this:

Congratulations! You have built your first web page!

Yes, it is very simple but you can see some fundamentals at work here – the text “Page Title” appears in the browser tab and of course the heading and paragraph text also show up.


10

In notepad, change the text of the page title, heading and paragraph:

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Paul’s Website</h1>
<p>You will learn amazing things!</p>
</body>
</html>

Or whatever text you wish. Then save your file once again. Notice that the browser still displays the old text. In order to display the updated web page we need to refresh the browser. Whilst displaying your browser, press F5 to do this and you will immediately see the updated page. (Note for later: you are witnessing the effect of caching – the browser keeps a local copy of your page to display and has to be refreshed in order to fetch the page again. The browser keeps a copy in its history which is quite separate from the folder location on your hard disk.)

11


Now, go back to notepad and delete the < at the start of:

<h1>Paul’s Website</h1> 

To give

h1>Paul’s Website</h1>

and save the file.


12

Go to your browser and press F5 and you should see:

Notice the changes – the HTML isn’t properly formed and so the browser does not display the text as intended.

That's it!

If you are feeling adventurous, play around with adding or deleting characters, saving then refreshing the browser to see the effects. Remember Ctrl-Z and Ctrl-Y to undo and redo edits – this is quite handy when trying out effects of deleting characters. 

  • 👍 Remember, you will NOT be building web pages like this. But if ever you see errors, this lesson will give you some pointers of where to look. And of course if you do get problems (and you will), you can simply outsource them for an expert to fix, usually for a small fee – depending on the nature of the problem.

Book a session now!

Remember, if you’ve purchased the Gold Level personal support option with the course, you can call me and I will help you with this. Book your slot by clicking the button below!

Join Our Facebook Group

Our community is filled with awesome, like-minded individuals who love to share ideas and resources!

Take the Lesson Quiz

Current Progress
Current Progress
Current Progress
Current Progress
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Pen
>