Steps to Create a Webpage in HTML using Notepad

Description: Create a web page in HTML using Notepad, save it, and open it in a browser.

Hint:

• Open Notepad, write the HTML code and save the file as index.html with the type “All Files”.
• Double-click the file to open it in the browser.

HTML code for the web page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page was created using Notepad.</p>
</body>
</html>

Output in the browser:

How it works

• Step 1: Open Notepad and type the code above.
• Step 2: Click File, then Save As. Name the file index.html, set “Save as type” to All Files and the encoding to UTF-8.
• Step 3: Double-click the saved file. It opens in your default browser.
• Step 4: To change the page, edit the file, save it and refresh the browser (F5).

A detailed guide with pictures is in HTML First Program using Notepad.

Program to see difference between paragraphs & normal text with line break

Description: Write a program that shows the difference between two paragraphs and a single text with line breaks.

Hint:

• Use two <p> tags for the paragraphs.
• Use the <br> tag inside one paragraph for the line break.

Paragraphs and line break program

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Paragraph vs line break</title>
</head>
<body>
  <h3>Two paragraphs</h3>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>

  <h3>One paragraph with a line break</h3>
  <p>This is the first line.<br>This is the second line.</p>
</body>
</html>

Output in the browser:

How it works

• Each <p> adds a space above and below, so the paragraphs look separate.
• <br> only moves the text to the next line. The lines stay close, as they are still one paragraph.
• Use paragraphs for separate ideas, and <br> for things like an address or a poem.

Read HTML Paragraphs.

Write an HTML program to display hello world.

Description: Write an HTML program that displays “Hello, World!” on a web page.

Hint:

• Use the basic page structure: doctype, html, head and body.
• Put the text inside the body, in a heading or paragraph tag.

HTML program to display Hello World

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Output in the browser:

How it works

• <!DOCTYPE html> tells the browser that this is an HTML5 page.
• The <title> is shown on the browser tab.
• The <h1> inside the body is the visible heading.

Learn the structure in HTML Page Structure.

Write a program to create a webpage to print values 1 to 5

Description: Create a web page that prints the values 1 to 5. Each value should be on a new line.

Hint:

• Use one <p> tag for each value, or the <br> tag for a line break.

HTML program to print 1 to 5

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Numbers</title>
</head>
<body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</body>
</html>

Output in the browser:

How it works

• Every <p> tag is a paragraph, and the browser puts each paragraph on a new line.
• You can also write 1<br>2<br>3<br>4<br>5 inside one paragraph. The <br> tag gives a line break.
• If you want a numbered list, use <ol>. See HTML Lists.

Write a program to create a webpage to print your city name in red color.

Description: Create a web page that prints the name of your city in red colour.

Hint:

• Use the style attribute with the CSS color property.
• The old <font color="red"> tag is not valid in HTML5.

HTML program to print a city name in red

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My City</title>
</head>
<body>
  <h1 style="color: red;">Delhi</h1>
</body>
</html>

Output in the browser:

How it works

• The style attribute holds CSS for this element only.
• color: red; changes the text colour to red. You can also use a hex code like #ff0000.

Learn more in HTML Styles.

Write a program to print a paragraph with different font and color.

Description: Create a web page with a paragraph of 4 sentences. Each sentence should have a different font and colour.

Hint:

• Put the paragraph in a <p> tag.
• Wrap each sentence in a <span> and use font-family and color in the style attribute.

HTML program for a paragraph with different font and colour

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fonts and colours</title>
</head>
<body>
  <p>
    <span style="font-family: Arial; color: red;">This sentence is in Arial and red.</span>
    <span style="font-family: 'Times New Roman'; color: green;">This one is in Times New Roman and green.</span>
    <span style="font-family: Verdana; color: blue;">This one is in Verdana and blue.</span>
    <span style="font-family: 'Courier New'; color: purple;">The last one is in Courier New and purple.</span>
  </p>
</body>
</html>

Output in the browser:

How it works

• <span> is an inline tag, so all sentences stay in the same paragraph.
• Each span has its own font-family and color.
• Old tutorials use the <font> tag for this. It is removed from HTML5, so we use CSS.

See HTML Div and Span.

Write an HTML program to create a page about yourself

Description: Create a web page with your name as the heading, a short paragraph about you, and a list of your hobbies.

Hint:

• Use <h1> for the name, <p> for the paragraph and <ul> for the hobbies.

HTML program for a page about yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <title>About Me</title>
</head>
<body>
  <h1>Robin Kumar</h1>
  <p>I am a student and I am learning web development.</p>
  <h2>My hobbies</h2>
  <ul>
    <li>Reading</li>
    <li>Cricket</li>
    <li>Music</li>
  </ul>
</body>
</html>

Output in the browser:

How it works

• The h1 is the main heading and the h2 is a sub heading.
• Each hobby is a <li> inside the <ul>.

Related: HTML Headings and HTML Lists.

Write an HTML program to display all six heading levels

Description: Create a web page that shows the headings from h1 to h6.

Hint:

• Write one tag for each level, with a text like “Heading 1”.

HTML program for heading tags

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</body>
</html>

Output in the browser:

How it works

• h1 is the biggest and most important heading, and h6 is the smallest.
• Use only one h1 on a real page.

Read HTML Headings.

Write an HTML program for text formatting (bold, italic, subscript, superscript)

Description: Create a web page that shows important text, emphasised text, highlighted text, the formula of water (H2O) and the square of a number (5 squared).

Hint:

• Use strong, em, mark, sub and sup tags.

HTML program for text formatting

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Text Formatting</title>
</head>
<body>
  <p>This is <strong>important</strong> text.</p>
  <p>This is <em>emphasised</em> text.</p>
  <p>This is <mark>highlighted</mark> text.</p>
  <p>The formula of water is H<sub>2</sub>O.</p>
  <p>5<sup>2</sup> is 25.</p>
  <p>Old price <del>$100</del>, new price <ins>$80</ins>.</p>
</body>
</html>

Output in the browser:

How it works

• strong shows bold and em shows italic text.
• sub lowers the text and sup raises it.
• del draws a line through the text and ins underlines it.

Read HTML Formatting.