Gayathri.R

Posted on Sep 30

Html structure

<!DOCTYPE html>

Document

<br> .click{<br> background-color: aqua;</p> <div class="highlight"><pre class="highlight plaintext"><code> } </style> <button id="color" onclick="colorchange()"> click </button> <script> function colorchange(){ let col=document.body </code></pre></div> <ol> <li>HTML Structure</li> </ol> <p><!DOCTYPE html><br> <html lang="en"></p> <div class="highlight"><pre class="highlight plaintext"><code><!DOCTYPE html> → Defines the document type (HTML5). <html lang="en"> → Root element, lang="en" specifies the language as English. </code></pre></div> <ol> <li>Head Section</li> </ol> <p><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> </head></p> <div class="highlight"><pre class="highlight plaintext"><code><meta charset="UTF-8"> → Supports all character encoding (like English, symbols, etc.). <meta name="viewport" ...> → Makes the webpage responsive for all devices. <title>Document</title> → Title shown on the browser tab. </code></pre></div> <ol> <li>Body Section</li> </ol> <p><body></p> <div class="highlight"><pre class="highlight plaintext"><code>All visible content (button, style, script) is written here. </code></pre></div> <ol> <li>CSS Styling</li> </ol> <style> .click { background-color: aqua; }

Defined inside <style> tag.

.click → A CSS class that changes the background color to aqua.

This class is added/removed dynamically using JavaScript.

Button Element

click

<button> → Creates a clickable button.

id="color" → Unique identifier (not directly used here but useful).

onclick="colorchange()" → Calls the JavaScript function colorchange() when the button is clicked.

Button text → “click”.

JavaScript Function

function colorchange(){ let col = document.body; col.classList.toggle("click"); }

<script> → Used for JavaScript code.

function colorchange() → A function that runs when the button is clicked.

document.body → Refers to the entire <body> of the page.

classList.toggle("click"):

    If the body does not have class click, it adds it.

    If the body already has class click, it removes it.

    This makes the background color toggle between default and aqua.

End of HTML Document

Closes the body and HTML tags properly.

🎯 Final Output

By default, the background is white.

When you click the button → The background turns aqua.

Clicking again → Background returns to white.

Works like a light switch effect.

Do you want me to also write this explanation in a blog style (with simple wording and flow) so you can directly use it for your blogging?
You said:
give with theoritical
ChatGPT said:

Got it 👍 You want the theoretical explanation of the program, step by step with headings and subtopics.
Here’s a theory-based breakdown of your HTML + CSS + JavaScript program:
📘 Theoretical Explanation of the Program

Program: Change the Background Color of a Webpage on Button Click

HTML (HyperText Markup Language)

HTML is the backbone of any web page.

It provides the structure of the web page.

In this program, HTML is used to:
```
Create the button.

Link CSS and JavaScript code into the page.
```

Key HTML Elements Used

<!DOCTYPE html> → Declares the document type (HTML5).

<html> → Root element of the web page.

<head> → Contains metadata (title, character set, responsive viewport).

<body> → Holds all the visible content such as the button.

<button> → Defines a clickable button that triggers the action.

CSS (Cascading Style Sheets)

CSS is used to style and design the elements of a web page.

In this program, we define a CSS class named click.

This class changes the background color of the web page to aqua when applied.

Important Concept

Class Selector (.classname) → Targets an element with the specified class.

Here, .click is a class that modifies the background color.

JavaScript (JS)

JavaScript makes the web page interactive.

In this program, JS is used to toggle the CSS class dynamically.

Function Explanation

function colorchange() {
let col = document.body;
col.classList.toggle("click");
}

function colorchange() → Declares a function that executes on button click.

document.body → Refers to the entire body of the web page.

classList.toggle("click") → Adds the click class if it’s not present; removes it if it’s already there.

This creates a toggle effect:

    First click → Background becomes aqua.

    Second click → Background returns to white.

Event Handling

The onclick event is used in the button:

click

When the button is pressed, it calls the JavaScript function colorchange().

This demonstrates event-driven programming where actions happen based on user interaction.

Working Principle

Initially, the body has no extra class → background is white.

User clicks the button → colorchange() runs.

The click class is toggled on the
.
Background color changes to aqua.

Clicking again → removes the class, so background turns white again.
Theory Summary

HTML → Structure (button + page layout).

CSS → Style (defines background color in a class).

JavaScript → Behavior (adds/removes the class on button click).

Together, these three technologies demonstrate the core concept of web development:
👉 HTML (Structure) + CSS (Style) + JS (Behavior) = Interactive Webpage

Would you like me to also prepare this in a note format (like a study material) with definitions + advantages of each part (HTML, CSS, JS) so you can use it for exam/interview prep?
You said:
ive both
ChatGPT said:

Perfect 👍 You want both versions:

Blog/Practical Style (easy flow, like an article)

Notes/Theoretical Style (study material with definitions, advantages, etc.)

I’ll give you both together below:
🌐 Program: Change Background Color on Button Click
✨ 1. Blog / Practical Style Explanation
🔹 Introduction

This program demonstrates how to make a simple interactive web page where clicking a button changes the background color. It’s a beginner-friendly example of how HTML, CSS, and JavaScript work together.
🔹 Step 1: HTML (Structure)

We first create a button using HTML. This button is what the user will click to trigger the color change.

click

The id="color" uniquely identifies the button.

The onclick="colorchange()" attribute makes sure that when the button is clicked, our JavaScript function will run.

🔹 Step 2: CSS (Styling)

Next, we define a CSS class that sets the background color to aqua.

.click {
background-color: aqua;
}

By default, the page has a white background.

When this class is applied to the <body>, the background changes to aqua.

🔹 Step 3: JavaScript (Interaction)

The JavaScript function adds or removes the class dynamically whenever the button is clicked.

function colorchange(){
let col = document.body;
col.classList.toggle("click");
}

document.body → refers to the entire page’s body.

classList.toggle("click") → adds the click class if it’s not there, removes it if it is already there.

🔹 Final Working

Page starts with a white background.

Click the button → background changes to aqua.

Click again → background goes back to white.

👉 This is called the toggle effect.
📚 2. Notes / Theoretical Style Explanation
Definition of the Program

A web program that demonstrates how to use HTML for structure, CSS for styling, and JavaScript for interactivity to change the background color of a web page with a button click.
Components Used
🔸 1. HTML (Structure)

Provides the layout of the webpage.

Used elements:

    <button> → Creates the clickable button.

    onclick → Event attribute to call JavaScript.

Advantage: Simple way to build structure and connect JavaScript.

🔸 2. CSS (Style)

Defines the look and feel of the webpage.

Here, .click class changes the background color.

Advantage: Separates design from structure and can be reused easily.

🔸 3. JavaScript (Behavior)

Adds functionality and interactivity to the page.

Uses classList.toggle() method to apply/remove CSS dynamically.

Advantage: Makes the webpage interactive and user-friendly.

Event Handling Concept

onclick Event → Executes a function when the button is pressed.

Event-driven programming allows web pages to respond to user actions.

Working Principle

Webpage loads → default background is white.

Button click → JavaScript applies CSS class → background turns aqua.

Second click → Class removed → background returns to white.

Advantages of This Program

Demonstrates integration of HTML, CSS, and JS.

Teaches class toggling for styling changes.

Simple, yet forms the basis for advanced UI interactions.

DEV Community

Html structure

Top comments (0)