Lecture: Introduction to HTML
Learning Objectives
By the end of this lecture, students will be able to:
- Explain what HTML is and why it’s used.
- Understand the structure of an HTML document.
- Identify and use basic HTML tags.
- Create a simple webpage using basic HTML elements.
1. Introduction
HTML (HyperText Markup Language) is the standard language for creating webpages. It
structures the content of a webpage using tags. HTML is not a programming language — it’s
a markup language.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to HTML.</p>
</body>
</html>
2. Structure of an HTML Document
- <!DOCTYPE html>: Defines document type (HTML5)
- <html>: Root element
- <head>: Contains metadata, title, CSS links, etc.
- <title>: Title displayed on browser tab
- <body>: Content area (visible to users)
3. Basic HTML Tags
Category Tag Description Example
Heading <h1> to <h6> Define headings <h2>Welcome</h2>
Paragraph <p> Adds a <p>This is a paragraph.</p>
paragraph
Line Break <br> Breaks line Hello<br>World
Bold/Italic <b>, <i> Text formatting <b>Bold</b>, <i>Italic</i>
Link <a> Creates <a
hyperlink href="[Link]
Image <img> Displays image <img src="[Link]" alt="Sample">
List <ul>, <ol>, Lists items <ul><li>Apple</li></ul>
<li>
Comment <!-- --> Adds notes <!-- This is a comment -->
4. Practical Example
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p>Hello! My name is [Your Name].</p>
<p>I love learning web development.</p>
<img src="[Link]" alt="My Photo" width="200">
<p>Visit my <a href="[Link]
</body>
</html>
5. Lab Activity / Practice
Tasks:
1. Create a webpage titled “My Hobbies”.
2. Include headings, paragraphs, and an image.
3. Add a link to any external site (e.g., YouTube or Wikipedia).
6. Summary and Q&A
- HTML is the foundation of web pages.
- Webpages are built using tags inside the <html> structure.
- Practice writing and viewing code in the browser.
7. Assessment / Homework
Assignment: Create a personal info webpage using at least 5 HTML tags.
Bonus: Add one image and one hyperlink.
Teaching Tools
- Use PowerPoint slides to explain structure and tags.
- Demonstrate live coding using VS Code or Notepad.
- Encourage students to experiment.