Notepad Code Editor

Using Code Editor Notepad++

Step 1:

First, to create folder in My documents in Windows 10, Click on New Folder as shown below.

My document create folder

Step 2:

Type Folder Name: DemoWeb.IMG_1920

Step 3:

Open The Notepad++. When the Notepad++ opens, its screen looks like as shown below. It will open with the file name new 1.


Step 4:

Now, click on File and then click on Save As…


Step 5:

Then, Save As dialog Box will appear. On this Dialog Box click on your created folder DemoWeb to save your file in this folder.IMG_1953

Step 6:

Now your DemoWeb folder Dialog Box will appear. Write the file name index.html then save it.


Step  7:

Now, you see the file index.html is opened and ready for you to write the html code.


Step 8:

Write the html code as shown below. The white Spaces in this coding is not important , it is only to make it easily readable by yourself and other people.


Step 9:

After you have written the code, in order to see the result or preview, save your work first then click on Run. The dropdown Menu pops up. This Menu shows List of Browser.


Step 10:

Click on your selected Web Browser. I normally use Chrome so I clicked on Chrome.



Now the Chrome Browser will appear and show the result as an image below



If it doesn’t display the preview properly or any error then check for any spelling mistakes, all the tags properly closed and nested and your code is well formed and doesn’t contain any syntax error.

Note: Every time you edit your coding, save it first then refresh your Browser page, otherwise the browser will not display your page if it is not saved.

⇐ Back to page HTML

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


%d bloggers like this: