Heapcoding

How to Create a Website Using HTML on Notepad

Published April 13, 2021

In this tutorial I shall teach you how to create a website using html on notepad. Creating a website is not so difficult as you are thinking. But if you will not start today you will not be able to start tomorrow.

A web page is a document that is written in HTML (Hyper Text Markup Language). This webpage is compiled by the web browser using the HTML language and is rendered in the web browser, through which a user can interact with it.

And a website is a collection of more than one web pages that are connected to each other via hyperlink. 

In this tutorial I shall show you how you can create a simple webpage using notepad and then by combining these webpages you can create your whole website using notepad.

In this tutorial I am using the text editor of “Ubuntu” operating system. You can use your own like Windows or MAC.

Step 1 – Open notepad

In step one simply open your notepad and create a blank document. And save this document as index.html with “html” extension. Like the screenshot below.

Opened document for creating the website
Opened document for creating the website
Save as with ".html" extension your web page
Save as with “.html” extension your web page

Step 2 – Write basic code for HTML document

Now when you saved your html document. Now let’s write a code for HTML basic webpage. So that the web browser can render the content of the document.

Basic building block of html document structure.
Basic building block of html document structure.

Step 3 – Rendering the web page content in web browser

Here we have created our basic html webpage. Now save it and open this document in the web browser. And you will see the content of the document rendered in your browser canvas.

Final rendered preview of web page in web browser.
Final rendered preview of web page in web browser.

Step 4 – Repeat the first 3 steps

In the above screenshot you can see that we have created a new webpage and rendered its content on the webpage. Now repeat all the above 3 steps if you want to create more web pages.

Step 5 – Link all web pages to make a website

Now what you need to do is that when you created your all required webpages. Then you need to link them all together like the screenshots below.

Homepage with hyperlinks.
Homepage with hyperlinks.

In the above screenshot I have added two hyperlinks for the webpages Home and contact pages, on our homepage.

Contact page with hyper links.
Contact page with hyper links.

In the above screen I have created a contact.html page where I have added contact details and the same hyperlinks to connect two web pages to each other.

Final rendered web preview in web browser of a simple website.
Final rendered web preview in web browser of a simple website.

In the above screenshot you can see that our web page is rendered to the web browser. And you can see the two hyperlinks on top of the page “Home, Contact”. This is a sample of a little website. 

You can see how easily you can create a website. So keep learning and if you want to make some advanced websites. You can learn more about programming languages like html, CSS and JavaScript.