Java script
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="[Link]('demo').i
nnerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
...............................
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick='[Link]("demo").i
nnerHTML = "Hello JavaScript!"'>Click
Me!</button>
</body>
</html>
..................................................
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute
values.</p>
<p>In this case JavaScript changes the value
of the src (source) attribute of an image.</p>
<button
onclick="[Link]('myImag
e').src='[Link]">Turn on the light</button>
<img id="myImage" src="[Link]"
style="width:100px">
<button
onclick="[Link]('myImag
e').src='[Link]'">Turn off the light</button>
</body>
</html>
.......................................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Smart Bulb On/Off</title>
<style>
body {
background-color: #0a192f;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
img {
width: 180px;
height: auto;
cursor: pointer;
transition: transform 0.3s ease, filter 0.3s
ease;
}
img:hover {
transform: scale(1.1);
filter: brightness(1.1);
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
background-color: #00bcd4;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #0097a7;
}
</style>
</head>
<body>
<h1>💡 Smart Bulb On/Off</h1>
<!-- Bulb image -->
<img id="bulb" src="[Link]" alt="Bulb
Off" onclick="toggleBulb()">
<br>
<button onclick="toggleBulb()">Toggle
Bulb</button>
<script>
let isOn = false;
function toggleBulb() {
const bulb =
[Link]('bulb');
if (isOn) {
[Link] = "[Link]";
[Link] = "Bulb Off";
} else {
[Link] = "[Link]";
[Link] = "Bulb On";
}
isOn = !isOn;
}
</script>
</body>
</html>
CSS selectors
Element selector
ID selector
Class Selector
Group Selector
………………………………………………………………
Element selector
…………………………………………………………
<!DOCTYPE html>
<html>
<head>
<style>
[Link]:center;
color: red;
}
</style>
</head>
<body>
<p> Its Element Selector Demo </p>
<p> Paragraph Demo</p>
<p> Its done on 3rd para </p>
<p> Hellllloooooooooooo</p>
<p> Paragraph Demo</p>
<p> Its done on 3rd para </p>
<p> Hellllloooooooooooo</p>
</body>
</html>
...................................
ID selector
...................................
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: Red;
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p id="para1"> This paragraph is affected by the style.</p>
</body>
</html>
..............................................
class selector
................................................
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<h2 class="center"> Class Selector Demo</h2>
<h3 class="center"> Class 3rd heading demo</h3>
<p class="center">Red and center-aligned paragraph.</p>
<p class="center"> Helllllllooooooo Girls </p>
</body>
</html>
...................................................
Group Selector
..................................................
<!DOCTYPE html>
<html>
<head>
<style>
h2, p {
text-align: center;
color: red;
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p> hello</p><p> hello</p><p> hello</p><p> hello</p><p> hello</p>
</body>
</html>