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.

IMG_1951

Step 4:

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

IMG_1952

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.

IMG_1954

Step  7:

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

IMG_1955

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.

IMG_1956

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.

IMG_1957

Step 10:

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

IMG_1958

 

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

IMG_1959

 

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

CRAFTS AND GARDEN TIPS AND PICTURES

%d bloggers like this: