📄 Web Development

Introduction to HTML

⏱ 3 hr3 topicsInteractive

🎯 By the end: You can explain what HTML is, write a valid page skeleton, set body attributes, and format text with headings, paragraphs and bold/italic/underline.

Every page on the World Wide Web is written in HTML (HyperText Markup Language). It's not a programming language — it marks up text to tell the browser how to structure a page. Edit the live examples and press Run to see your page.

1The WWW, HTML & tags

The World Wide Web (WWW) is the huge collection of linked web pages you view in a browser. Each page is written in HTML.

HTML is a markup language, NOT a programming language — it describes the structure of a page (headings, paragraphs, images) but doesn't make decisions or calculations.

Tools you need

Just two: a text editor (Notepad) to write the code, and a web browser (Chrome, Edge, Firefox) to view it.

Two kinds of tag

Type	Has a closing tag?	Example
Container tag	Yes (open + close)	`<p> ... </p>`
Empty tag	No	`<br>`, `<hr>`, `<img>`

Key points

The WWW is the collection of linked web pages; each page is written in HTML.
HTML is a markup language (structures a page), not a programming language.
Container tags have an opening + closing tag (<p>...</p>); empty tags don't (<br>, <hr>).

2Page boilerplate & body attributes

Every page has the same four-tag boilerplate (skeleton):

<html>
  <head><title>My Page</title></head>
  <body> ...visible content... </body>
</html>

The <body> tag can take attributes that style the whole page:

Attribute	Sets
`bgcolor`	Background colour
`text`	Text colour
`background`	A background image

Edit and Run:

Your first page▶ live preview

index.html

<html>
  <head><title>About Me</title></head>
  <body bgcolor="#eef" text="navy">
    <h1>Hello, Vidaara!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Preview

Key points

The boilerplate is <html>, <head>, <title>, <body>.
<title> shows on the browser tab; visible content goes in <body>.
Body attributes: bgcolor (background colour), text (text colour), background (an image).

3Formatting text

Tags to structure and style text:

Tag	Does
`<h1>`…`<h6>`	Headings (h1 largest → h6 smallest)
`<p>`	A paragraph
`<br>` / `<hr>`	Line break / horizontal rule
`<b>` / `<i>` / `<u>`	Bold / Italic / Underline

Run this and try changing it:

Text formatting▶ live preview

index.html

<h1>Main Heading</h1>
<h3>Sub heading</h3>
<p>This is <b>bold</b>, <i>italic</i> and <u>underlined</u>.</p>
<hr>
<p>Line one<br>Line two</p>

Preview

Key points

Headings <h1>–<h6> (h1 largest); <p> for paragraphs.
<br> is a line break and <hr> a horizontal rule (both empty tags).
<b>, <i>, <u> make text bold, italic and underlined.

★ Practical: a profile page

In Notepad (or the playground), build one HTML page with:

A proper skeleton with a <title> of your name.
A <body> background colour and text colour.
An <h1> heading and two paragraphs with a <br> and an <hr>.
Your favourite subject in bold and a quote in italics.

Ready for the chapter test?

Answer 5 questions. Score 60% or more to mark this chapter complete.

Start the test →

💡 Log in to save your progress and earn the certificate.

← Previous

Intro to Databases (MS Access)

Multimedia & 2D Animation