WEEK 1
Introduction to HTML
Course Notes & Practical Exercises
Topics Covered
● Introduction to the Internet and the World Wide Web
● What is HTML?
● History of HTML
● Web Browsers
● HTML Document Structure
● HTML Elements and Tags
● Headings, Paragraphs & Text Formatting
● Lists
● Comments
● Practical Exercises & Assignment
1. Introduction to the Internet and the World Wide Web
What is the Internet?
The Internet is a massive global network of interconnected computers and servers that communicate
with each other using standardized rules called protocols (e.g. TCP/IP). It allows data — text, images,
video, and more — to be sent between devices anywhere in the world.
What is the World Wide Web (WWW)?
The World Wide Web is a system of interlinked documents (web pages) that are accessed via the
Internet using a web browser. The Web is a service that runs on top of the Internet — the Internet is the
infrastructure (the roads); the Web is one of the things that travels on it (the traffic).
Internet World Wide Web
The physical/logical network connecting computers
A collection
worldwide.
of web pages and documents linked via hyperlinks.
Existed since the late 1960s (ARPANET). Invented in 1989 by Tim Berners-Lee at CERN.
Includes email, file transfer, the Web, streaming,
Onegaming,
of manyetc.
services that run over the Internet.
How the Web Works (Client – Server Model)
1 The user types a URL (e.g. [Link] into a browser.
1 The browser (the client) sends a request to a web server that hosts the site.
1 The server processes the request and sends back the requested files (HTML, CSS, JS, images).
1 The browser receives these files and renders them into the visual page you see.
Note: Key building blocks of the Web: HTML (structure/content), CSS (style/layout), and JavaScript
(behaviour/interactivity).
Week 1: Introduction to HTML Page 2
2. What is HTML?
HTML stands for HyperText Markup Language. It is not a programming language — it is a markup
language used to structure content on the web using elements and tags.
Breaking Down the Name
Term Meaning
HyperText Text that contains links (hyperlinks) to other text/pages, allowing non-linear navigation.
Markup A system of tags used to annotate/structure content, describing what each part of the content is.
Language A set of rules and syntax that both humans and browsers can understand.
Why HTML Matters
1 It is the backbone/skeleton of every web page.
1 It defines the structure and meaning (semantics) of content — headings, paragraphs, images, links,
etc.
1 It works together with CSS (styling) and JavaScript (interactivity) to build modern websites.
1 It is interpreted directly by web browsers — no compilation is needed.
Week 1: Introduction to HTML Page 3
3. History of HTML
HTML has evolved significantly since its creation, growing from a simple document-sharing format into
the rich, semantic language that powers today's web.
Year Milestone
1989 Tim Berners-Lee proposes a hypertext system while working at CERN.
1991 HTML is publicly described; the first version (~18 tags) is used to share documents.
1995 HTML 2.0 is published as a standard by the IETF.
1997 HTML 3.2 and HTML 4.0 are released by the W3C, adding tables, scripting support, etc.
1999 HTML 4.01 becomes a stable, widely-adopted standard.
2000 XHTML 1.0 combines HTML with the strict syntax rules of XML.
2014 HTML5 is released by the W3C — adds semantic tags, audio/video, canvas, and APIs.
Present HTML5 (maintained as a 'living standard' by WHATWG) continues to evolve.
Note: HTML5 introduced semantic elements like <header>, <nav>, <article>, and <footer>, making
page structure more meaningful for both developers and browsers.
Week 1: Introduction to HTML Page 4
4. Web Browsers
A web browser is software that requests, interprets (parses), and displays web pages. It reads HTML,
CSS, and JavaScript files and renders them as the visual, interactive pages users see and interact with.
How a Browser Renders a Page
1 Request: Browser sends an HTTP/HTTPS request to a web server for a page.
2 Parse HTML: Browser reads the HTML and builds the DOM (Document Object Model) tree.
3 Parse CSS: Browser applies styles to build the render tree (visual layout).
4 Execute JavaScript: Browser runs scripts that can further modify content/behaviour.
5 Paint: Browser draws pixels on the screen to display the final page.
Common Web Browsers
Browser Engine Developer
Google Chrome Blink Google
Mozilla Firefox Gecko Mozilla
Safari WebKit Apple
Microsoft Edge Blink (Chromium) Microsoft
Opera Blink (Chromium) Opera Software
Developer Tools
Most browsers include built-in Developer Tools (open with F12 or Ctrl+Shift+I / Cmd+Option+I) that let
you inspect HTML, edit CSS live, view the console for JavaScript errors, and check network requests —
essential tools for learning and debugging.
Week 1: Introduction to HTML Page 5
5. HTML Document Structure
Every HTML document follows a standard skeletal structure. Browsers expect this structure to correctly
interpret and display a page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation of Each Part
Line / Tag Purpose
<font face='Courier'><!DOCTYPE html></font>
Declares the document as HTML5. Must be the very first line.
<font face='Courier'><html></font> The root element that wraps all content on the page.
<font face='Courier'>lang="en"</font> Declares the page language (helps accessibility & SEO).
<font face='Courier'><head></font> Contains meta-information not displayed directly on the page (title, character set, links to CSS
<font face='Courier'><meta charset="UTF-8"></font>
Sets the character encoding so text/symbols display correctly.
<font face='Courier'><title></font> Sets the text shown in the browser tab/title bar.
<font face='Courier'><body></font> Contains all the visible content of the web page.
Note: Save HTML files with a .html extension and open them in a browser to view the result. No special
software or compiler is required.
Week 1: Introduction to HTML Page 6
6. HTML Elements and Tags
Tags vs. Elements
A tag is the markup itself, written inside angle brackets, e.g. <p>. An element is the tag together with
its content and closing tag: <p>Some text</p>.
<opening tag>Content goes here</closing tag>
Example:
<p>This is a paragraph.</p>
Anatomy of an Element
1 Opening tag — e.g. <p>, marks the start.
1 Content — the text or nested elements inside.
1 Closing tag — e.g. </p>, marks the end (note the forward slash).
1 Attributes — extra information placed inside the opening tag, in the form name="value", e.g. <a
href="[Link]
Void (Self-Closing) Elements
Some elements have no content and therefore no closing tag — these are called void elements.
Common examples:
<br> <!-- line break -->
<hr> <!-- horizontal rule/line -->
<img src="[Link]" alt="A photo"> <!-- image -->
<input type="text"> <!-- form input -->
Nesting Elements
Elements can be placed inside other elements, but must be properly nested — tags must close in the
reverse order they were opened.
<!-- Correct -->
<p>This is <strong>very important</strong> text.</p>
<!-- Incorrect -->
<p>This is <strong>very important</p></strong>
Week 1: Introduction to HTML Page 7
7. Headings
HTML provides six levels of headings, <h1> through <h6>, used to define titles and section headings in
order of importance.
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Minor heading</h4>
<h5>Smaller heading</h5>
<h6>Smallest heading</h6>
1 <h1> is the most important and should typically be used once per page.
1 Headings should be used in the correct logical order (don't skip from h1 to h4) for accessibility and
SEO.
1 Headings are not meant to be used just to make text bold or big — use CSS for pure styling.
Week 1: Introduction to HTML Page 8
8. Paragraphs
The <p> element defines a paragraph of text. Browsers automatically add space before and after each
paragraph.
<p>HTML is the standard markup language for creating web pages.</p>
<p>It describes the structure of a web page using elements.</p>
Note: Browsers ignore extra whitespace and line breaks in your source code. To force a line break within text,
use the <br> tag.
Week 1: Introduction to HTML Page 9
9. Text Formatting
HTML provides several elements to format and emphasize text.
Tag Purpose Example Result
<font face='Courier'><b></font>
Bold text (visual only) <b>Bold text</b>
<font face='Courier'><strong></font>
Important text (bold + semantic meaning) <b>Strong text</b>
<font face='Courier'><i></font>
Italic text (visual only) <i>Italic text</i>
<font face='Courier'><em></font>
Emphasized text (italic + semantic meaning) <i>Emphasized</i>
<font face='Courier'><u></font>
Underlined text <u>Underlined</u>
<font face='Courier'><small></font>
Smaller text Smaller text
<font face='Courier'><mark></font>
Highlighted text Highlighted
<font face='Courier'><del></font>
Deleted/strikethrough text <strike>Deleted</strike>
<font face='Courier'><sub></font>
Subscript text H<sub>2</sub>O
<font face='Courier'><sup></font>
Superscript text x<super>2</super>
Note: Prefer semantic tags (<strong>, <em>) over purely visual ones (<b>, <i>) because they convey
meaning to screen readers and search engines, not just appearance.
Week 1: Introduction to HTML Page 10
10. Lists
HTML supports three types of lists: unordered, ordered, and description lists.
Unordered List (bullets)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List (numbered)
<ol>
<li>Plan the page</li>
<li>Write the HTML</li>
<li>Style with CSS</li>
</ol>
Description List (term/definition pairs)
<dl>
<dt>HTML</dt>
<dd>The markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>
Nested Lists
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
Week 1: Introduction to HTML Page 11
11. Comments
Comments let you leave notes in your code that are ignored by the browser. They are useful for
explaining code or temporarily disabling a section.
<!-- This is a comment. It will not be displayed in the browser. -->
<p>Visible text.</p>
<!--
Multi-line comments are also possible
by spanning several lines like this.
-->
1 Comments start with <!-- and end with -->.
1 Use comments to label sections of a large page (e.g. <!-- Header -->).
1 Avoid leaving sensitive information in comments — anyone can view page source.
Week 1: Introduction to HTML Page 12
12. Practical Exercises
Complete the following exercises using a plain text editor (e.g. VS Code, Notepad++, Sublime Text).
Save each file with a .html extension and open it in your browser to check the result.
Exercise 1: Basic Page Structure
Create a new HTML file with the correct DOCTYPE, html, head, and body tags. Set the page title to My
First Page.
Exercise 2: Headings & Paragraphs
Add an <h1> with your name, followed by two <h2> sections ('About Me' and 'My Hobbies'), each
containing at least one paragraph of text.
Exercise 3: Text Formatting
Within your paragraphs, make at least one word bold using <strong> and one word italic using <em>.
Exercise 4: Lists
Add an unordered list of 3 of your favourite hobbies and an ordered list of 3 steps for a simple daily
routine (e.g. making tea).
Exercise 5: Comments
Add a comment above each major section of your page (e.g. <!-- About Me Section -->)
describing what it contains.
Week 1: Introduction to HTML Page 13
13. Assignment
Title: Build a Personal Profile Page
Using only the HTML concepts covered this week (no CSS yet), create a single web page called
[Link] that includes:
1 A correct, complete HTML document structure (DOCTYPE, html, head with a title, and body).
2 One <h1> with your full name as the main page title.
3 At least three section headings (<h2>) — for example 'About Me', 'My Education', and 'My Interests'.
4 At least three paragraphs of text describing yourself.
5 At least one bold (<strong>) and one italic (<em>) piece of text.
6 One unordered list (e.g. your hobbies) and one ordered list (e.g. your top 3 goals this year).
7 At least two HTML comments labelling different sections of the page.
Submission Guidelines
1 Save your file as [Link].
1 Test the page by opening it in at least two different browsers.
1 Submit the .html file (or a link to it) through the course portal before the Week 1 deadline.
End of Week 1 Notes — Introduction to HTML
Week 1: Introduction to HTML Page 14