Introduction to HTML
HTML = Hypertext Markup Language
What is HTML?
• HTML = markup language, not programming
• Adds tags so browsers know how to show content
Key Points:
• HTML gives structure to a website
o Organizes headers, paragraphs, lists, images, links
o Without HTML → website is just plain text
• HTML makes websites work everywhere
o Works on news sites, shopping sites, educational sites
o Content shows correctly on all devices
• HTML is easy for beginners
o Uses simple tags with clear start & end
o Can make a simple homepage look organized and professional
Environment setup for HTML using VS code
Step 1: Visit the Official Website
• Open: [Link]
Step 2: Download VS Code
• Click Download for Windows (or Mac/Linux as per your OS)
• Wait for the file to download (.exe for Windows, .dmg for Mac)
Step 3: Install VS Code
• Open the downloaded file
• Accept the license agreement
• Choose installation location (default is fine)
• ✔ Tick:
o Add to PATH
o Create a desktop icon
• Click Install
Step 4: Launch VS Code
• Open VS Code from Desktop or Start Menu
• You will see the VS Code interface with sidebar and workspace
Step 5: Install Required Extensions (Recommended)
• Click Extensions icon on left sidebar (or press Ctrl + Shift + X)
• Search and install:
o Live Server
o HTML CSS Support (optional)
Step 6: Create a Project Folder
• Create a folder anywhere (e.g., Desktop → HTMLProject)
• This will store your HTML files and images
Step 7: Open Folder in VS Code
• Click File → Open Folder
• Select HTML Project
Step 8: Create Your First HTML File
• Click File → New File → Save As
• Name the file: [Link]
Step 9: Write Basic HTML Code
Paste this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Step 10: Run the HTML File
• Right-click inside the file
• Click Open with Live Server
• Your browser will open the webpage
HTML Elements and HTML Tags
HTML Elements and HTML Tags are related but distinct. An HTML element is the complete
structure, including the opening tag, content (if any), and the closing tag (if applicable).
On the other hand, a tag is the actual keyword or name enclosed in angle brackets (< >) that
tells the browser what kind of content to expect.
HTML Page Structure
Basic HTML Structure – Simple Version
1. HTML Page Start
• <!DOCTYPE html> → Tells the browser “This is an HTML5 page.”
• <html> → Everything on your webpage goes inside this tag.
2. Head Section
• <head> → Holds info about the page (like title, styles). Doesn’t show on the page itself.
• <title> → The name that appears on the browser tab. Example: “Delicious Pancakes
Recipe.”
3. Body Section
• <body> → This is the main part where you put everything visible like text, images, links,
and buttons.
4. Text and Headings
• <h1> → Biggest heading, for main titles.
• <h2> to <h6> → Smaller headings.
• <p> → Paragraph tag. Organizes your text into readable chunks instead of one big block.
TAG PURPOSE EXAMPLE
<h1>...<h6> Headings <h1>Welcome</h1>
<p> Paragraph <p>This is a paragraph.</p>
<a> Link <a href="[Link] Google</a>
<img> Image <img src="[Link]" alt="Flower">
<ul> / <ol> Lists <ul><li>Item 1</li><li>Item 2</li></ul>
<table> Table <table><tr><td>Name</td><td>Age</td></tr></table>
<form> Input Forms <form><input type="text"></form>
Example: My Weekly Clinic Schedule
<h2>Clinic Timings</h2>
<ul>
<li>Monday – 10am to 2pm</li>
<li>Wednesday – 2pm to 6pm</li>
<li>Friday – 10am to 2pm</li>
</ul>
Common HTML Elements
1. Image (<img>)
What it does
Shows a picture on the webpage.
How it works
<img src="[Link]" alt="Flower">
• src = image file name/path
• alt = text shown if image doesn’t load
Do’s
• Always write alt text
• Use correct image path
• Keep image size reasonable
Don’ts
• Don’t use very large images (slows page)
• Don’t forget alt
• Don’t stretch image using height/width wrongly
2. List (<ul>, <ol>, <li>)
What it does
Displays items in a list.
How it works
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
• <ul> = unordered list (bullets)
• <ol> = ordered list (numbers)
• <li> = list item
Do’s
• Use <ul> for bullets, <ol> for numbers
• Keep items short and clear
Don’ts
• Don’t put text directly inside <ul> without <li>
• Don’t mix list types without reason
3. Table (<table>)
What it does
Shows data in rows and columns.
How it works
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>12</td>
</tr>
</table>
• <tr> = table row
• <th> = heading cell
• <td> = data cell
Do’s
• Use tables for data only
• Use <th> for headings
• Keep structure neat
Don’ts
• Don’t use table for page layout
• Don’t leave rows incomplete
4. Form (<form>)
What it does
Takes input from users (name, email, etc.)
How it works
<form>
<input type="text" placeholder="Enter name">
</form>
Do’s
• Use labels for inputs
• Use correct input types (text, email, number)
• Validate user input
Don’ts
• Don’t leave inputs without labels
• Don’t collect data without purpose
5. Button (<button>)
What it does
Performs an action when clicked.
How it works
<button>Submit</button>
Do’s
• Give clear text (Submit, Login)
• Use buttons inside forms for submission
Don’ts
• Don’t use buttons without action
• Don’t confuse button with link
Quick Summary Table
Element Use Important Tip
Image Show picture Always use alt
List Show items Use <li> properly
Table Show data Not for layout
Form Take input Use labels
Button Perform action Clear text
If you remember this line, you’ll never forget:
Image shows, List arranges, Table organizes, Form collects, Button acts.
Interaction of HTML, CSS, and JavaScript
HTML, CSS, and JavaScript work together to create modern web pages. Each plays a unique
role - HTML gives structure, CSS adds style, and JavaScript brings interactivity.
How They Work Together
Take a look at the image below to understand how HTML, CSS, and JavaScript work together to
build and enhance a webpage.
When combined, they create a complete, interactive website
Best Practices Using HTML (Summary)
1. Always close your tags properly
Every opening tag must have a closing tag (like <p></p>). Missing tags can break the
page.
2. Keep your code clean and well-spaced
Use proper spacing and indentation so the code is easy to read and fix.
3. Use meaningful (semantic) tags
Use tags like <header>, <main>, <section>, <footer> instead of only <div>.
This helps browsers, search engines, and screen readers understand your page.
4. Always add alt text to images
It helps visually impaired users and improves search engine ranking.
5. Check your HTML before publishing
Use online validators (like W3C) to find mistakes and ensure your page works on all
browsers.
Assignment
MCQ – Identify the Correct Tag
Question: Which tag is used to create a clickable link?
A. <img>
B. <a>
C. <link>
D. <href>
Activity – Create a Student Profile Page
Create an HTML page named [Link] that includes:
• A main heading: Student Profile
• Your name as a subheading
• A paragraph about your school
• An image with proper alt text
• An unordered list of your favourite subjects
Task – Build a Simple Timetable
Create an HTML page named [Link] that shows:
• A heading: My Daily Timetable
• A table with 3 columns: Time, Subject, Teacher
• At least 4 rows of data
• Proper use of <table>, <tr>, <th>, <td>
MCQ – Choose the Correct Statement
Which of the following is correct about the <form> tag?
A. It displays images
B. It creates tables
C. It collects user input
D. It creates headings