Introduction
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