Complete Web Designing Course for Beginners

🌐 Lesson F10 – Creating Your First Web Page

🚀 Writing Your First HTML Program and Understanding How a Web Page is Built

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Create their first web page

✅ Understand the structure of an HTML document

✅ Create and save HTML files

✅ Run HTML files in a web browser

✅ Understand basic HTML tags

✅ Understand opening and closing tags

✅ Build a simple personal webpage

📖 Introduction

Congratulations!

Until now, we have learned:

What Web Designing is
How Websites Work
Frontend vs Backend
Types of Websites
HTML, CSS & JavaScript
VS Code Setup
Browser Developer Tools
Website Planning

Now comes the exciting part.

🎉 We Are Finally Going To Write Code!

Today you will create your very first webpage.

This is the same starting point for every web developer in the world.

Whether someone becomes:

Frontend Developer
Full Stack Developer
Software Engineer
Freelancer

everyone starts with their first HTML page.

🤔 What is a Web Page?

A web page is a single page displayed in a web browser.

Examples:

Google Homepage

One webpage.

YouTube Homepage

One webpage.

About Us Page

One webpage.

Contact Page

One webpage.

A website is made of multiple webpages connected together.

Example:

College Website

├── Home Page

├── About Page

├── Departments Page

├── Gallery Page

└── Contact Page

All these pages together form a website.

🌐 What is HTML?

HTML stands for:

HyperText Markup Language

HTML is used to create webpage structure.

HTML tells the browser:

What content to display
Where to display it
How content is organized

🏗️ Understanding HTML Tags

HTML works using Tags.

A tag is a special keyword enclosed inside angle brackets.

Example:

<h1>

<p>

🎯 Purpose of Tags

Tags tell the browser:

“What type of content is this?”

Examples:

<h1>

means:

Heading

<p>

means:

Paragraph

🔄 Opening and Closing Tags

Most HTML tags have:

Opening Tag

<h1>

Closing Tag

</h1>

Notice:

The closing tag contains:

Example

<h1>Welcome Students</h1>

Browser Output:

Welcome Students

📦 Anatomy of an HTML Element

Example:

<h1>My First Website</h1>

Breakdown:

Opening Tag

<h1>

Content

My First Website

Closing Tag

</h1>

Together these form an HTML Element.

🏗️ Structure of an HTML Document

Every HTML page follows a basic structure.

Example:

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Welcome Students</h1>

<p>This is my first webpage.</p>

</body>

</html>

This may look confusing now.

Don’t worry.

Let’s understand each line.

🔍 Line 1 – DOCTYPE Declaration

<!DOCTYPE html>

Purpose:

Tells the browser:

This document uses HTML5

HTML5 is the latest version of HTML.

Always place this line at the top.

🔍 Line 2 – HTML Tag

<html>

This is the root element.

Everything inside the webpage is placed between:

<html>

</html>

Think of it as the container of the entire webpage.

🔍 Head Section

<head>

</head>

Contains information about the webpage.

This information is usually not visible directly on the page.

Examples:

Page Title
CSS Links
Meta Information

🔍 Title Tag

<title>My First Website</title>

Purpose:

Displays webpage title on browser tab.

Example:

Browser Tab:

My First Website

🔍 Body Section

<body>

</body>

This is the most important section.

Everything visible on the webpage is placed inside the body.

Examples:

Text
Images
Buttons
Tables
Forms

💡 Easy Analogy

Imagine a Human Body.

HTML = Entire Body

HEAD = Brain Information

BODY = Visible Body Parts

Similarly:

The Body Section contains everything users can see.

🖥️ Creating Your First HTML File

Open VS Code.

Create a folder:

First Website

Open the folder.

Create a file named:

index.html

Why index.html?

Most websites use:

index.html

as the homepage.

Browsers automatically look for this file first.

✍️ Writing Your First Program

Type the following code:

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Welcome Students</h1>

<p>This is my first webpage.</p>

</body>

</html>

Save the file.

💾 Saving the File

Shortcut:

Ctrl + S

Always save your code after making changes.

🌐 Running the Webpage

Method 1:

Double-click the file.

Browser opens automatically.

Method 2:

Use Live Server Extension.

Right Click:

Open with Live Server

🎉 Expected Output

You will see:

Welcome Students

This is my first webpage.

Congratulations!

You have officially created your first webpage.

🏷️ Understanding Basic HTML Tags

Let’s learn some useful tags.

Heading Tag

<h1>Heading</h1>

Largest heading.

Example:

<h1>NextGen Dev Hub</h1>

Output:

NextGen Dev Hub

Paragraph Tag

<p>This is a paragraph.</p>

Used for writing text.

Line Break Tag

<br>

Moves content to the next line.

Example:

Hello<br>Students

Output:

Hello
Students

Horizontal Line

<hr>

Creates a horizontal line.

Output:

--------------------

📚 HTML Tag Case Rules

HTML is not case sensitive.

These are both valid:

<H1>

and

<h1>

However,

Professional developers always use:

lowercase

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Closing Tags

Wrong:

<h1>Welcome

Correct:

<h1>Welcome</h1>

Mistake 2

Saving File Incorrectly

Wrong:

index.txt

Correct:

index.html

Mistake 3

Editing Without Saving

Always press:

Ctrl + S

Mistake 4

Typing Tags Incorrectly

Wrong:

<h1 Welcome </h1>

Correct:

<h1>Welcome</h1>

🏗️ Mini Project – My Introduction Page

Create the following webpage.

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Introduction</title>

</head>

<body>

<h1>My Introduction</h1>

<p>Name: Rahul Kumar</p>

<p>College: XYZ Polytechnic</p>

<p>Branch: Computer Science</p>

<p>Hobby: Coding</p>

</body>

</html>

🎯 Expected Output

My Introduction

Name: Rahul Kumar

College: XYZ Polytechnic

Branch: Computer Science

Hobby: Coding

📝 Practical Activity

Create a webpage containing:

Your Name
College Name
Branch
Semester
Mobile Number
Career Goal

Save it as:

student-profile.html

Run it in Chrome.

📋 Assignment

Assignment F10

Answer the following:

What is HTML?
What is a web page?
What is an HTML tag?
What is the purpose of the <head> section?
What is the purpose of the <body> section?
Why is index.html important?
Write a simple HTML program displaying your name.

🧠 Quiz

Q1. What does HTML stand for?

A. HyperText Markup Language

B. Hyper Transfer Markup Language

C. High Text Machine Language

D. Hyper Tool Markup Language

✅ Answer: A

Q2. Which tag creates a paragraph?

A. <h1>

B. <body>

C. <p>

D. <title>

✅ Answer: C

Q3. Which section contains visible webpage content?

A. Head

B. Title

C. Body

D. HTML

✅ Answer: C

Q4. Which file is usually the homepage?

A. home.html

B. page.html

C. index.html

D. start.html

✅ Answer: C

Q5. What shortcut saves a file?

A. Ctrl + A

B. Ctrl + S

C. Ctrl + D

D. Ctrl + P

✅ Answer: B

📌 Lesson Summary

✅ HTML is the foundation of web development.

✅ A webpage is a single page displayed in a browser.

✅ HTML uses tags to define content.

✅ Every HTML document follows a basic structure.

✅ The <head> section contains webpage information.

✅ The <body> section contains visible content.

✅ You created your first webpage successfully.

✅ You are now ready to begin learning HTML in detail.