How to make html page with notepad ? |HTML Tutorials #1

How to make html page with notepad codesparta--make-html-webapage

In the last article we learned what is HTML  and what does html mean  ? Now let’s quickly create a simple HTML page .

What do  you need to make an HTML page ?

  • Notepad or any of these software Notepad ++ , Sublime Text , Dreamweaver
  • Web Browsers (To view webpage )

Rules for writing HTML code

  1. HTML is made of the markup tags , and each tag must have an opening and a closing , eg. <h1>Heading tag 1</h1> , but some exceptions are there like <br> it can be also written as <br>Empty tag</br> .
  2. Proper nesting of tags , <b><i>Bold and Italics </i></b> , the tag started first will end last .
  3. Markup Additional Attribute : Any additional markup attribute should be  added within the opening tag only , for example , Giving ID to the heading tag <h1 id =”thisIsID”>Hello there</h1>

Let’s make a simple html page with Notepad


  1. Open notepad and copy paste the above  code to it .

    how to make html page with notepad html basic syntax

    How to make html page with notepad

  2. Save as your file as .html extension instead of .txt format and now it should appear with the default web browser’s icon , click to open .
  3. You skip all this mess of doing so by using notepad++ , sublime text or any other web editors listed above or learn and write your code online at Jsfiddle

Coming to the explanation of the above syntax

<!DOCTYPE html> : It is the declaration of the document type .

<html> : It describes our webpage , the webpage’s design , layout , styling will apply within the <html> and </html> tags only anything before or after will appear as simple text , same applies to the the other tags .

<body> :It defines the document body, in body tag we generally put all the visible elements of our HTML page .

<h1> <p> Tags : These are some of the Markup tags used to define heading and paragraph (going to explained later).

Read this Article offline also , Download PDF Version by clicking the pdf icon

If you liked our content please Subscribe to our Website for more helpful content.


Leave a Reply

Your email address will not be published. Required fields are marked *