Module: Introduction to HTML & CSS
Module Overview:
This module introduces you to HTML (the structure of webpages) and CSS (the style
and design). You will learn the basics of writing code, using a code editor, and building
your first simple web page.
Learning Goals
By the end of this module, you will be able to:
• Explain what HTML and CSS are.
• Understand how a webpage is structured.
• Write basic HTML elements (headings, paragraphs, images, links, lists).
• Use CSS to change colors, fonts, and layout.
• Use a code editor (IDE) to create and edit your web pages.
Tools You Will Need
To write HTML and CSS, you need a code editor (IDE).
Installed Editors
• Visual Studio Code (VS Code) – highly recommended
• Sublime Text
• Brackets
Tip: If using VS Code, install the Live Server extension to instantly preview your
webpage.
Introduction to HTML
What is HTML?
HTML (HyperText Markup Language) is the language used to create the structure
of a webpage.
Every text, image, link, or section you see on a webpage is written using HTML.
HTML is made of tags, which look like this:
<p>This is a paragraph.</p>
Tags usually come in pairs:
• Opening tag: <p>
• Closing tag: </p>
HTML Structure
Every HTML file follows this basic structure:
Structure of an HTML Document (Where it Starts and Ends)
Every HTML document follows a specific structure. It has a beginning, a middle, and
an end.
HTML STRUCTURE USING OUTPUT OF THE HTML
VS CODE STRUCTURE
Explanation
1. <!DOCTYPE html> — The Very Beginning
• This is always the first line.
• It tells the browser, “This is an HTML5 document.”
2. <html> ... </html> — The Entire Page
• This tag wraps the whole webpage.
• Everything between these tags is part of the site.
• <html> is the start, </html> is the end.
3. <head> ... </head> — Page Information (Not Visible)
• The head contains settings and information for the browser.
• It includes the page title, CSS links, scripts, and metadata.
Example:
<head>
<title>My Webpage</title>
</head>
4. <body> ... </body> — Visible Content
• Everything inside the body is displayed on the webpage.
• This includes:
o Headings
o Paragraphs
o Images
o Links
o Lists
o Buttons
Example:
<body>
<h1>Welcome!</h1>
<p>This is my page.</p>
</body>
Ending the Document
• The HTML page ends with </body> and then </html>.
•
Common HTML Elements
Basic Structure Tags
Tag Description
<!DOCTYPE html> Declares HTML5 document
<html> Root element of the webpage
<head> Contains information about the page
<title> Sets the title shown on the browser tab
<body> Holds all visible content on the webpage
Text Formatting Tags
Tag Description
<h1>–<h6> Headings (h1 = largest, h6 = smallest)
<p> Paragraph
<br> Line break
<hr> Horizontal line divider
<strong> Bold text
<em> Italic text
Link & Image Tags
Tag Description
<a> Creates a hyperlink
<img> Displays an image
List Tags
Tag Description
<ul> Unordered list (bullets)
<ol> Ordered list (numbers)
<li> List item
Container/Grouping Tags
Tag Description
<div> Block-level container
<span> Inline container
Table Tags
Tag Description
<table> Creates a table
<tr> Table row
<td> Table data cell
<th> Table header cell
Form Tags
Tag Description
<form> Creates an input form
<input> Input field (text, email, number, etc.)
<label> Label for form fields
<button> Clickable button
How to Insert an Image in HTML
To insert an image on a webpage, you use the <img> tag.
The <img> tag is self-closing, meaning it does NOT need a closing tag like </img>.
Basic Image Tag Format
<img src="[Link]" alt="Description of the image">
Explanation of Attributes
1. src (Source)
• Tells the browser where to find the image.
• It can be:
o a file in your project
Example: "[Link]"
o a folder inside your project
Example: "images/[Link]"
o an image from the internet
Example: "[Link]
Example:
<img src="images/[Link]" alt="A beautiful sunrise">
alt (Alternative Text)
• A short description of the image.
• Important for:
o Screen readers (accessibility)
o Search engines
o Showing text when the image fails to load
Example:
<img src="[Link]" alt="A cute cat sitting on a sofa">
Optional Attributes (Good to Practice)
1. width and height
Set the size of the image:
<img src="[Link]" alt="Tree" width="300">
2. title
Shows text when the cursor hovers over the image:
<img src="[Link]" alt="Flower" title="This is a flower">
REMINDER:
• Make sure the image file is in the correct folder.
• Double-check spelling — file names must match exactly.
• Use alt text every time.
• If the image does not show, check the file path.
INTRODUCTION TO CSS
CSS (Cascading Style Sheets) is the language used to style webpages.
While HTML creates the structure of a page, CSS controls the appearance.
CSS allows you to change:
• Colors
• Fonts
• Backgrounds
• Spacing (margins, padding)
• Layout and positioning
• Borders
• Sizes of elements
Think of CSS as the clothes and decoration of a webpage.
➢ Ways to Add CSS
1. Inline CSS
Style is added inside an HTML tag.
<h1 style="color:red;">Hello</h1>
Best for:
• Very small changes
• One-time styling
Not recommended for full websites
Because it becomes messy and hard to maintain.
2. Internal CSS
CSS is inside the <head> section.
<style>
p{
color: green;
</style>
Best for:
• Small projects
• When you want all styles in one file
3. External CSS (Best Method – Separate File)
You create a separate CSS file, usually named [Link], and link it inside <head>.
Best for:
• Large projects
• Clean and organized code
• Reusing the same CSS on many pages
HTML file:
<head>
<link rel="stylesheet" href="[Link]">
</head>
[Link] file:
body {
background-color: lightgray;
h1 {
color: blue;
Summary Table
Method How It Works Best Use Example
Inline CSS Inside the HTML tag One-time edits <h1 style="color:red;">
Internal In <style> tag inside Small projects <style> h1 { color: blue; }
CSS <head> </style>
External Separate .css file Real projects, <link rel="stylesheet"
CSS linked in HTML best practice href="[Link]">
PROJECT“Create & Explain Your Basic Website with HTML & CSS”
Objective:
Students will design a simple website using HTML and CSS and record a video
explaining each HTML tag and CSS property they use.
Materials Needed:
• Computer with Visual Studio Code
• Internet browser
• Screen recording software
Step 1: Choose a Website Type
Students pick one basic website type:
1. Personal Profile Page – Introduce yourself, hobbies, favorite quote.
2. Portfolio Page – Showcase projects or artwork.
3. Small Business Page – Example: bakery or coffee shop landing page.
4. Fan Page – About a favorite book, movie, or celebrity.
5. Hobby Page – About gaming, sports, music, or travel.
Step 2: Plan Your Website
• Sketch a layout
• Decide which HTML tags you’ll use:
• Decide which CSS properties you’ll use:
Step 3: Create Your HTML File
1. Open VS Code → New File → Save As → [Link].
2. Write a basic HTML structure
Step 4: Create Your CSS File
1. Open VS Code → New File → Save As → [Link].
2. Write CSS and
Step 5: Record Your Video
• Open screen recording software.
• Explain each part while showing your VS Code:
o Explain the purpose of each HTML tag and why you used it.
o Explain the CSS properties, how they change the page appearance,
and how CSS links to HTML.
o Show your website in a browser and point out the effects of your CSS.
Step 6: Submit Your Work
• Upload the video and optionally a screenshot of your website.
• Include the HTML and CSS files.
Final Exam Requirement
Important: Completing the “Create & Explain Your Basic
Website” activity is mandatory to take the final exam.
Instructions:
Create a Folder First:
• Name it: FirstName_LastName_Section
• Place all files inside:
o [Link] (HTML file)
o [Link] (CSS file)
o Any images/photos used
o Your video explanation
• Video: Record a 2–5-minute video explaining each HTML tag and CSS
property used.
• Submission: Upload the folder to the given Google Drive link by November 18,
2025. Only students who submit a complete folder following the format can take
the final exam from November 19–21, 2025.
