🏗️ Lesson F6 – Introduction to HTML, CSS & JavaScript

🌐 The Three Core Technologies Behind Every Modern Website

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what HTML is

✅ Understand what CSS is

✅ Understand what JavaScript is

✅ Understand the purpose of each technology

✅ Differentiate between HTML, CSS, and JavaScript

✅ Understand how these technologies work together

✅ Identify the role of each technology in website development

📖 Introduction

Have you ever wondered how websites are created?

When you open a website, you see:

• Text
• Images
• Buttons
• Menus
• Colors
• Animations
• Forms

All these things are created using three important technologies:

🏗️ HTML

🎨 CSS

⚡ JavaScript

These are the foundation of web development.

Every web designer and frontend developer must learn these technologies.

Without them, websites cannot exist.

🏠 Real Life Example – Building a House

Imagine building a beautiful house.

A house requires:

Structure

Walls, doors, windows, rooms.

Decoration

Paint, furniture, curtains, lighting.

Functionality

Fans, lights, automatic doors, security systems.

Similarly, a website requires:

HTML

Creates structure.

CSS

Provides design and beauty.

JavaScript

Adds functionality and interactivity.

🌐 What is HTML?

HTML stands for:

HyperText Markup Language

HTML is the basic building block of every website.

HTML creates the structure and content of a webpage.

🏗️ Role of HTML

HTML is responsible for:

• Headings
• Paragraphs
• Images
• Links
• Tables
• Forms
• Buttons
• Lists

Everything visible on a webpage starts with HTML.

💡 Simple Example

Consider this webpage:

Welcome to My Website

This is my first website.

HTML creates this content.

🧱 Example HTML Code

<h1>Welcome to My Website</h1>

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

📌 Output

Welcome to My Website

This is my first website.

🎯 Think of HTML as…

Skeleton of the Human Body

Without a skeleton, the body cannot stand.

Similarly:

Without HTML, a website cannot exist.

🎨 What is CSS?

CSS stands for:

Cascading Style Sheets

CSS is used to make websites beautiful.

🎯 Role of CSS

CSS controls:

• Colors
• Fonts
• Backgrounds
• Borders
• Layouts
• Spacing
• Animations

💡 Example Without CSS

Imagine a website with:

• Black text
• White background
• No colors
• No design

It would look boring.

💡 Example With CSS

The same website can have:

• Blue headings
• Attractive fonts
• Beautiful buttons
• Nice spacing

Now it looks professional.

🎨 Example CSS Code

h1{
color:blue;
font-size:40px;
}

📌 Result

The heading becomes:

• Blue
• Larger
• More attractive

🎯 Think of CSS as…

Clothes and Decoration

A person without proper clothes may not look attractive.

Similarly:

A website without CSS looks plain and boring.

⚡ What is JavaScript?

JavaScript is a programming language used to make websites interactive.

🎯 Role of JavaScript

JavaScript controls:

• Button Actions
• Menus
• Forms
• Sliders
• Calculators
• Animations
• Popups

💡 Example

Suppose you click a button.

A message appears:

Welcome Student

This action is performed using JavaScript.

⚡ Example JavaScript Code

alert("Welcome Student");

📌 Output

When executed:

A popup message appears.

Welcome Student

🎯 Think of JavaScript as…

Brain of the Website

Just as the brain controls actions in the body,

JavaScript controls actions on a website.

🌐 How HTML, CSS, and JavaScript Work Together

Let’s understand with a simple example.

Step 1 – HTML

Creates structure.

<button>Click Me</button>

Creates a button.

Step 2 – CSS

Styles the button.

button{
background-color:blue;
color:white;
}

Makes the button attractive.

Step 3 – JavaScript

Adds functionality.

alert("Button Clicked");

Shows a popup when clicked.

🎯 Final Result

HTML → Creates Button

CSS → Beautifies Button

JavaScript → Makes Button Functional

🏠 Another Real-Life Example

Imagine a Car.

HTML = Car Body

Provides structure.

CSS = Car Paint & Design

Provides appearance.

JavaScript = Engine

Provides functionality.

Without any one of them:

The car will be incomplete.

The same applies to websites.

📱 Example: Login Page

Consider a login page.

HTML Creates

• Username Box
• Password Box
• Login Button

CSS Designs

• Colors
• Fonts
• Layout
• Attractive appearance

JavaScript Controls

• Login Validation
• Error Messages
• User Interaction

🌍 Every Modern Website Uses These Technologies

Popular websites like:

• Google
• Facebook
• Instagram
• Amazon
• Netflix
• YouTube

all use:

✅ HTML

✅ CSS

✅ JavaScript

🔥 Why Learn HTML First?

Because:

HTML is the foundation.

Before decorating a house, you must build it.

Similarly:

Before learning CSS and JavaScript, you must learn HTML.

📚 Learning Path in This Course

We will follow this sequence:

Step 1

Learn HTML

Step 2

Learn CSS

Step 3

Learn JavaScript

Step 4

Build Projects

Step 5

Create Complete Websites

⚖️ Comparison Table

🌟 Advantages of HTML

✅ Easy to Learn

✅ Beginner Friendly

✅ Foundation of Web Development

✅ Supported by All Browsers

🌟 Advantages of CSS

✅ Makes Websites Beautiful

✅ Improves User Experience

✅ Creates Responsive Designs

✅ Controls Complete Appearance

🌟 Advantages of JavaScript

✅ Makes Websites Interactive

✅ Creates Dynamic Pages

✅ Improves User Engagement

✅ Used in Modern Web Applications

🚀 Future Technologies Built on These Skills

After mastering HTML, CSS, and JavaScript, you can learn:

• Bootstrap
• Tailwind CSS
• React
• Angular
• Vue.js
• Node.js
• Full Stack Development

These advanced technologies all depend on the basics you are learning now.

📝 Practical Activity

Open the following websites:

1. Google
2. Amazon
3. YouTube

Try to identify:

HTML Elements

• Text
• Images
• Buttons

CSS Elements

• Colors
• Fonts
• Layouts

JavaScript Elements

• Search Function
• Menus
• Interactive Buttons

Write your observations.

📋 Assignment

Assignment F6

Answer the following questions:

1. What is HTML?
2. What is CSS?
3. What is JavaScript?
4. Why is HTML called the foundation of web development?
5. What is the role of CSS?
6. What is the role of JavaScript?
7. Explain how HTML, CSS, and JavaScript work together.

🧠 Quiz

Q1. What does HTML stand for?

A. HyperText Markup Language

B. Hyper Transfer Machine Language

C. High Text Markup Language

D. Hyper Tool Markup Language

✅ Answer: A

Q2. Which technology is used for styling?

A. JavaScript

B. CSS

C. Python

D. SQL

✅ Answer: B

Q3. Which technology adds interactivity?

A. HTML

B. CSS

C. JavaScript

D. PHP

✅ Answer: C

Q4. Which technology creates webpage structure?

A. CSS

B. HTML

C. JavaScript

D. MySQL

✅ Answer: B

Q5. Which technology is considered the brain of a website?

A. HTML

B. CSS

C. JavaScript

D. Bootstrap

✅ Answer: C

📌 Lesson Summary

✅ HTML creates the structure of a website.

✅ CSS makes the website attractive and professional.

✅ JavaScript adds functionality and interactivity.

✅ Every modern website uses HTML, CSS, and JavaScript.

✅ HTML is the foundation of web development.

✅ CSS controls appearance.

✅ JavaScript controls behavior.

✅ Together these technologies create complete websites.