HTML Basic Introduction Notes
Uploaded by
ayeshaiqbal4u2HTML Basic Introduction Notes
Uploaded by
ayeshaiqbal4u2HTML Basic Introduction Notes
👨🏫 Topic: Introduction to HTML
💻 Software: Visual Studio Code
🌐 What is HTML?
📌 Definition:
HTML stands for:
Hyper Text Markup Language
It is the standard language used to create webpages and websites.
HTML helps us:
Add text
Insert images
Create headings
Make links
Structure web pages
💡 Why We Use HTML
HTML is used to:
Create websites
Design webpage structure
Display content on browsers
Build forms, tables, and links
🌍 Examples of Websites Made with HTML
Educational websites
Online shopping websites
Blogs
Portfolios
News websites
🖥️How to Create an HTML File
5
📌 Steps:
🔹 Step 1:
Open Visual Studio Code
🔹 Step 2:
Click:
File → New File
OR press:
Ctrl + N
🔹 Step 3:
Save the file
Click File → Save As
Write file name:
[Link]
⚠️Important:
Always use:
.html
extension
🔹 Step 4:
Start writing HTML code
🌐 Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first webpage.</p>
</body>
</html>
📌 Understanding <!DOCTYPE html>
✅ What is <!DOCTYPE html>?
<!DOCTYPE html>
This line tells the browser:
“This document is written in HTML5.”
It helps the browser understand:
Which version of HTML is being used
How to display the webpage correctly
💡 Simple Explanation for Students
You can explain it like this:
<!DOCTYPE html> is an instruction for the browser.
It tells the browser that we are creating an HTML webpage.
⚠️Important Points
It is written at the top of HTML document
It is not a normal HTML tag
It does not have closing tag
It helps avoid webpage errors
📌 Understanding Main HTML Tags
🔹 <html> Tag
<html>
</html>
Purpose:
Main root of HTML document
All HTML code is written inside this tag
🔹 <head> Tag
<head>
</head>
Purpose:
Contains webpage information such as:
Title
CSS links
Meta data
This information is usually not visible on webpage.
🔹 <title> Tag
<title>My Website</title>
Purpose:
Shows webpage title on browser tab.
Example:
If title is:
My Website
Then browser tab displays:
My Website
🔹 <body> Tag
<body>
</body>
Purpose:
Contains all visible content of webpage:
Headings
Paragraphs
Images
Buttons
Everything students see on webpage is inside <body>.
🏷️HTML Elements and Tags
📌 What is an HTML Tag?
HTML tags are keywords used to create webpage elements.
Example:
<h1>Heading</h1>
📌 Parts of a Tag
Part Example
Opening Tag <h1>
Content Heading
Closing Tag </h1>
📌 Opening and Closing Tags
Type Example
Opening Tag <h1>
Closing Tag </h1>
Closing tag contains:
📌 What is an HTML Element?
An HTML element includes:
Opening tag
Content
Closing tag
Example:
<p>Hello Students</p>
This whole line is called an HTML element.
✍️How to Write HTML Tags
📌 Rules:
Tags are written inside < >
Most tags have:
o Opening tag
o Closing tag
Closing tag contains /
Tags should be properly nested
✅ Examples
Heading Tag
<h1>My Heading</h1>
Paragraph Tag
<p>This is paragraph.</p>
Line Break Tag
<br>
⚠️<br> has no closing tag.
▶️How to Run HTML File
📌 Method 1:
Double click HTML file
OR
📌 Method 2:
Use Live Server
4
🌐 What is Live Server?
Live Server is an extension in VS Code that helps us run HTML webpages easily in the
browser.
It automatically:
Opens webpage in browser
Refreshes webpage after saving changes
💡 Why We Use Live Server
Without Live Server:
We manually refresh browser every time
With Live Server:
Webpage updates automatically
Faster and easier for beginners
🛠️How to Install Live Server
📌 Steps:
🔹 Step 1:
Open VS Code
🔹 Step 2:
Click Extensions Icon
OR press:
Ctrl + Shift + X
🔹 Step 3:
Search:
Live Server
🔹 Step 4:
Install extension by:
Ritwick Dey
▶️How to Use Live Server
📌 Steps:
🔹 Step 1:
Open your HTML file
Example:
[Link]
🔹 Step 2:
Right-click inside file
🔹 Step 3:
Click:
Open with Live Server
🔹 Step 4:
Browser opens automatically
🔄 Auto Refresh Feature
When you:
Change code
Save file (Ctrl + S)
Live Server automatically refreshes browser.
✅ Example
HTML Code:
<h1>Hello Students</h1>
<p>This is my first webpage.</p>
The webpage will display:
Hello Students
💡 Important Tips
Always save file with .html
Tags should be properly closed
Use lowercase tags for better practice
Save changes before running
Use indentation for clean code
📝 Practice Task for Students
✅ Task 1:
Create an HTML file named:
[Link]
✅ Task 2:
Write:
One heading
One paragraph
Change webpage title
✅ Example:
<!DOCTYPE html>
<html>
<head>
<title>Student Page</title>
</head>
<body>
<h1>Welcome Students</h1>
<p>I am learning HTML.</p>
</body>
</html>