<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the first paragraph of the web page. It contains sample text.</p>
<p>This is the second paragraph. HTML is used to create web pages.</p>
</body>
</html>Welcome to My Web Page This is the first paragraph of the web page. It contains sample text. This is the second paragraph. HTML is used to create web pages.
<!DOCTYPE html>
<html>
<head>
<title>Personal Data Form</title>
</head>
<body>
<h2>Personal Data Form</h2>
<form>
Name:
<input type="text" name="name">
<br><br>
Password:
<input type="password" name="password">
<br><br>
Email:
<input type="email" name="email">
<br><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<br><br>
Course:
<select name="course">
<option>BCA</option>
<option>B.Sc</option>
<option>B.Tech</option>
<option>MCA</option>
</select>
<br><br>
Hobbies:
<input type="checkbox" name="hobby1" value="Reading"> Reading
<input type="checkbox" name="hobby2" value="Sports"> Sports
<input type="checkbox" name="hobby3" value="Music"> Music
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>A personal data entry form containing Name, Password, Email, Gender, Course, Hobbies and Submit button will be displayed. рдПрдХ рд╡реНрдпрдХреНрддрд┐рдЧрдд рдЬрд╛рдирдХрд╛рд░реА (Personal Data) рджрд░реНрдЬ рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рдлреЙрд░реНрдо рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрдЧрд╛, рдЬрд┐рд╕рдореЗрдВ Name, Password, Email, Gender, Course, Hobbies рддрдерд╛ Submit Button рд╣реЛрдЧрд╛ред
<!DOCTYPE html>
<html>
<head>
<title>Nested Ordered List</title>
</head>
<body>
<h2>Beverages List</h2>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>Beverages List
1. Coffee
2. Tea
1. Black Tea
2. Green Tea
3. Milk
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Demonstration</title>
</head>
<body>
<h1 id="top">Anchor Tag Examples</h1>
<h3>1. Link Opening in New Window</h3>
<a href="https://www.google.com" target="_blank">
Open Google in New Window
</a>
<hr>
<h3>2. Link Opening in Same Window</h3>
<a href="https://www.yahoo.com" target="_self">
Open Yahoo in Same Window
</a>
<hr>
<h3>3. Reference within the Same HTML Document</h3>
<a href="#bottom">Go to Bottom of Page</a>
<hr>
<h3>4. Reference to an Image</h3>
<a href="image1.jpg">View Image 1</a>
<hr>
<h3>5. Image as a Hyperlink to Display Another Image</h3>
<a href="image2.jpg">
<img src="image1.jpg" alt="Image 1" width="200" height="150">
</a>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bottom">Bottom of the Page</h2>
<a href="#top">Go to Top of Page</a>
</body>
</html>A link that opens Google in a new window/tab. A link that opens Yahoo in the same window. A link that jumps to the bottom section of the page. A link that opens an image file. An image that acts as a hyperlink and opens another image when clicked. рдЕрдкреЗрдХреНрд╖рд┐рдд рдЖрдЙрдЯрдкреБрдЯ (Hindi): Google рдХрд╛ рд▓рд┐рдВрдХ рдирдИ рд╡рд┐рдВрдбреЛ/рдЯреИрдм рдореЗрдВ рдЦреБрд▓реЗрдЧрд╛ред Yahoo рдХрд╛ рд▓рд┐рдВрдХ рдЙрд╕реА рд╡рд┐рдВрдбреЛ рдореЗрдВ рдЦреБрд▓реЗрдЧрд╛ред рд▓рд┐рдВрдХ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рд╕реЗ рдкреЗрдЬ рдХреЗ рдирд┐рдЪрд▓реЗ рднрд╛рдЧ рдкрд░ рдкрд╣реБрдБрдЪрд╛ рдЬрд╛рдПрдЧрд╛ред рд▓рд┐рдВрдХ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рд╕реЗ Image рдЦреБрд▓реЗрдЧреАред Image рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рд╕реЗ рджреВрд╕рд░реА Image рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрдЧреАред
<!DOCTYPE html>
<html>
<head>
<title>My City - Varanasi</title>
<style>
/* Blink Effect */
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body bgcolor="lightyellow">
<h1 align="center" style="color:blue; font-size:40px;">
VARANASI
</h1>
<hr>
<p style="color:red; font-family:Arial; font-size:24px;">
Kashi Vishwanath Temple
</p>
<p style="color:green; font-family:'Courier New'; font-size:24px; font-style:italic;">
Dashashwamedh Ghat
</p>
<p style="color:purple; font-family:'Times New Roman'; font-size:24px; font-weight:bold;">
Sarnath
</p>
<p style="color:brown; font-family:Verdana; font-size:24px;">
Ramnagar Fort
</p>
<!-- Blink рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ Text -->
<p class="blink" style="color:orange; font-family:Tahoma; font-size:24px;">
Harishchandra Post Graduate College
</p>
<hr>
<marquee behavior="scroll" direction="left" scrollamount="5">
Welcome to Varanasi - The Spiritual Capital of India
</marquee>
</body>
</html>Varanasi appears at the top in large blue text. Landmarks are displayed in different colors, styles and fonts. College name appears as blinking text. A scrolling message moves across the page. рдЕрдкреЗрдХреНрд╖рд┐рдд рдЖрдЙрдЯрдкреБрдЯ (Hindi): рд╡рд╛рд░рд╛рдгрд╕реА рдХрд╛ рдирд╛рдо рдмрдбрд╝реЗ рдиреАрд▓реЗ рдЕрдХреНрд╖рд░реЛрдВ рдореЗрдВ рд╕рдмрд╕реЗ рдКрдкрд░ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред рдкреНрд░рдореБрдЦ рд╕реНрдерд▓ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд░рдВрдЧреЛрдВ, рд╢реИрд▓рд┐рдпреЛрдВ рдФрд░ рдлреЙрдиреНрдЯ рдореЗрдВ рджрд┐рдЦрд╛рдИ рджреЗрдВрдЧреЗред рдХреЙрд▓реЗрдЬ рдХрд╛ рдирд╛рдо рдмреНрд▓рд┐рдВрдХ рдХрд░реЗрдЧрд╛ред рдПрдХ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╕рдВрджреЗрд╢ рдкреЗрдЬ рдкрд░ рдЪрд▓рддрд╛ рд╣реБрдЖ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред
<!DOCTYPE html>
<html>
<head>
<title>Seven Colored Lines</title>
</head>
<body>
<p style="color:red;">This line is Red.</p>
<p style="color:blue;">This line is Blue.</p>
<p style="color:green;">This line is Green.</p>
<p style="color:orange;">This line is Orange.</p>
<p style="color:purple;">This line is Purple.</p>
<p style="color:brown;">This line is Brown.</p>
<p style="color:black;">This line is Black.</p>
</body>
</html>This line is Red. (Red Color) This line is Blue. (Blue Color) This line is Green. (Green Color) This line is Orange. (Orange Color) This line is Purple. (Purple Color) This line is Brown. (Brown Color) This line is Black. (Black Color)
<!DOCTYPE html>
<html>
<head>
<title>Polynomial Expression</title>
</head>
<body>
<h2>Polynomial Expression</h2>
<p>
a<sub>0</sub> +
a<sub>1</sub>x +
a<sub>2</sub>x<sup>2</sup> +
a<sub>3</sub>x<sup>3</sup>
</p>
</body>
</html>Polynomial Expression aтВА + aтВБx + aтВВx┬▓ + aтВГx┬│
<!DOCTYPE html>
<html>
<head>
<title>Frame Layout</title>
</head>
<frameset rows="25%,45%,30%">
<frame src="frame1.html" name="frame1">
<frameset cols="50%,50%">
<frame src="frame2.html" name="frame2">
<frame src="frame3.html" name="frame3">
</frameset>
<frameset cols="33%,34%,33%">
<frame src="frame4.html" name="frame4">
<frame src="frame5.html" name="frame5">
<frame src="frame6.html" name="frame6">
</frameset>
</frameset>
</html>
frame1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
</head>
<body bgcolor="lightblue">
<h2>Name and Address</h2>
<p>Name : Kumar Gaurav</p>
<p>Address : Varanasi, Uttar Pradesh</p>
</body>
</html>
frame2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
</head>
<body bgcolor="lightyellow">
<h2>Qualifications</h2>
<ul>
<li>High School</li>
<li>Intermediate</li>
<li>O Level</li>
<li>BCA</li>
</ul>
</body>
</html>
frame3.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 3</title>
</head>
<body bgcolor="lightgreen">
<h2>Favourite Sites</h2>
<a href="https://www.google.com">Google</a><br><br>
<a href="https://www.youtube.com">YouTube</a><br><br>
<a href="https://www.wikipedia.org">Wikipedia</a>
</body>
</html>
frame4.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 4</title>
</head>
<body bgcolor="pink">
<h2>Scrolling Message</h2>
<marquee>
Welcome to My Website
</marquee>
</body>
</html>
frame5.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 5</title>
</head>
<body bgcolor="lightgray">
<h2>Blinking Reminder</h2>
<blink>
Submit Assignment on Time
</blink>
</body>
</html>
frame6.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 6</title>
</head>
<body bgcolor="lavender">
<h2>Image</h2>
<img src="image.jpg" width="200" height="150" alt="Sample Image">
</body>
</html>A web page will be displayed with: First Frame containing Name and Address. Second Frame containing a Bulleted List of Qualifications. Third Frame containing Links to Favourite Sites. Fourth Frame displaying a Scrolling Message. Fifth Frame displaying Blinking Reminders. Sixth Frame displaying an Image.
<!DOCTYPE html>
<html>
<head>
<title>Warning Message Page</title>
<style>
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body bgcolor="red">
<center>
<br><br><br>
<h1 class="blink" style="color:white; font-size:60px;">
WARNING
</h1>
<marquee direction="left" scrollamount="5">
<font color="yellow" size="6">
READ THE MESSAGE
</font>
</marquee>
</center>
</body>
</html>Red background page. Large blinking "WARNING" message in the center. "READ THE MESSAGE" scrolling below the warning. рдЕрдкреЗрдХреНрд╖рд┐рдд рдкрд░рд┐рдгрд╛рдо (Hindi): рд▓рд╛рд▓ рд░рдВрдЧ рдХрд╛ Background рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред рдмреАрдЪ рдореЗрдВ рдмрдбрд╝реЗ рдЖрдХрд╛рд░ рдХрд╛ рдмреНрд▓рд┐рдВрдХ рдХрд░рддрд╛ рд╣реБрдЖ "WARNING" рд╕рдВрджреЗрд╢ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред рдЙрд╕рдХреЗ рдиреАрдЪреЗ "READ THE MESSAGE" рд╕реНрдХреНрд░реЙрд▓ рд╣реЛрддрд╛ рд╣реБрдЖ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред
<!DOCTYPE html>
<html>
<head>
<title>Hello World Program</title>
</head>
<body>
<h2>Hello World in Bold and Italic Form</h2>
<b>
<i>Hello World</i>
</b>
</body>
</html>Hello World (Hello World Bold рдФрд░ Italic рджреЛрдиреЛрдВ рд░реВрдкреЛрдВ рдореЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрдЧрд╛ред)
<!DOCTYPE html>
<html>
<head>
<title>Remove Image</title>
</head>
<body>
<img src="image.jpg" onclick="this.style.display='none';">
</body>
</html>
....................................................................................................................................
OR
...............................................................................................................................
<!DOCTYPE html>
<html>
<head>
<title>Remove Image on Click</title>
<script>
function removeImage() {
document.getElementById("myImage").style.display = "none";
}
</script>
</head>
<body>
<h2>Click on the Image to Remove It</h2>
<img id="myImage"
src="image.jpg"
width="300"
height="200"
onclick="removeImage()">
</body>
</html>Image рд╕реНрдХреНрд░реАрди рдкрд░ рджрд┐рдЦрд╛рдИ рджреЗрдЧреАред Image рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддреЗ рд╣реА рд╡рд╣ рд╕реНрдХреНрд░реАрди рд╕реЗ рд╣рдЯ рдЬрд╛рдПрдЧреАред
<!DOCTYPE html>
<html>
<head>
<title>Simple Interest</title>
<script>
function SI()
{
var p = document.getElementById("p").value;
var r = document.getElementById("r").value;
var t = document.getElementById("t").value;
alert("Simple Interest = " + (p*r*t)/100);
}
</script>
</head>
<body>
Principal:
<input type="text" id="p"><br><br>
Rate:
<input type="text" id="r"><br><br>
Time:
<input type="text" id="t"><br><br>
<input type="button" value="OK" onclick="SI()">
</body>
</html>The user enters Principal Amount, Rate of Interest and Duration. When the OK button is clicked, a message box displays the calculated Simple Interest. рдЕрдкреЗрдХреНрд╖рд┐рдд рдЖрдЙрдЯрдкреБрдЯ (Hindi): рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ Principal Amount, Rate of Interest рддрдерд╛ Duration рджрд░реНрдЬ рдХрд░реЗрдЧрд╛ред OK рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рдкрд░ рдПрдХ Message Box рдореЗрдВ рд╕рд╛рдзрд╛рд░рдг рдмреНрдпрд╛рдЬ (Simple Interest) рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрдЧрд╛ред
<!DOCTYPE html>
<html>
<head>
<title>Google Hyperlink</title>
</head>
<body>
<h1>Hyperlink Example</h1>
<p>
Click the link below to open Google in a new window:
</p>
<a href="https://www.google.com" target="_blank">
Open Google
</a>
</body>
</html>Hyperlink Example Click the link below to open Google in a new window: Open Google
<!DOCTYPE html>
<html>
<head>
<title>Three Images</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
img {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2 align="center">Display Three Images</h2>
<div class="container">
<div class="left">
<img src="image1.jpg" alt="Left Image">
</div>
<div class="center">
<img src="image2.jpg" alt="Center Image">
</div>
<div class="right">
<img src="image3.jpg" alt="Right Image">
</div>
</div>
</body>
</html>[Image 1] [Image 2] [Image 3] Left Center Right
<!DOCTYPE html>
<html>
<head>
<title>Class Time Table</title>
</head>
<body>
<h2 align="center">Class Time Table / рдХрдХреНрд╖рд╛ рд╕рдордп рд╕рд╛рд░рдгреА</h2>
<table border="1" cellspacing="5" cellpadding="10" align="center">
<tr>
<th>Day / рджрд┐рди</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td rowspan="5" align="center"><b>Lunch / рднреЛрдЬрди</b></td>
<td>Computer</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2" align="center">Chemistry Lab</td>
<td>Math</td>
<td>English</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Math</td>
<td>English</td>
<td>Computer</td>
</tr>
<tr>
<td>Thursday</td>
<td colspan="2" align="center">Computer Lab</td>
<td>Physics</td>
<td>Math</td>
</tr>
<tr>
<td>Friday</td>
<td>English</td>
<td>Math</td>
<td>Physics</td>
<td>Computer</td>
</tr>
</table>
</body>
</html>--------------------------------------------------------- | Day | 9-10 | 10-11 | 11-12 | LUNCH | 1-2 | --------------------------------------------------------- | Mon | Math | Eng | Phys | | Comp| | Tue | Chem Lab (colspan 2) | Math | Eng | | Wed | Physics | Math | Eng | | Comp| | Thu | Comp Lab (colspan 2) | Phys | Math| | Fri | Eng | Math | Phys | | Comp| ---------------------------------------------------------
index.html
<!DOCTYPE html>
<html>
<head>
<title>Four Frames Example</title>
</head>
<frameset cols="25%,75%">
<!-- Left Frame -->
<frame src="menu.html" name="menu">
<!-- Right Side -->
<frameset rows="33%,34%,33%">
<frame name="frame1">
<frame name="frame2">
<frame name="frame3">
</frameset>
</frameset>
</html>
...........................................................................................................................................
menu.html
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<h3>Forms</h3>
<a href="form1.html" target="frame1">Student Form</a>
<br><br>
<a href="form2.html" target="frame2">Employee Form</a>
<br><br>
<a href="form3.html" target="frame3">Feedback Form</a>
</body>
</html>
...........................................................................................................................
form1.html
<!DOCTYPE html>
<html>
<head>
<title>Student Form</title>
</head>
<body>
<h2>Student Form</h2>
<form>
Name:
<input type="text"><br><br>
Roll No:
<input type="text"><br><br>
<input type="submit">
</form>
</body>
</html>
...................................................................................................................
form2.html
<!DOCTYPE html>
<html>
<head>
<title>Employee Form</title>
</head>
<body>
<h2>Employee Form</h2>
<form>
Name:
<input type="text"><br><br>
Department:
<input type="text"><br><br>
<input type="submit">
</form>
</body>
</html>
..................................................................................................
form3.html
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>Feedback Form</h2>
<form>
Name:
<input type="text"><br><br>
Feedback:
<textarea></textarea><br><br>
<input type="submit">
</form>
</body>
</html>--------------------------------------------- | Links | Form 1 | Form 2 | Form 3 | ---------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h2>Prime Number Check</h2>
<input type="number" id="n" placeholder="Enter number">
<button onclick="check()">Check</button>
<p id="ans"></p>
<script>
function check() {
let n = (document.getElementById("n").value);
let prime = true;
if (n <= 1) {
prime = false;
} else {
for (let i = 2; i < n; i++) {
if (n % i == 0) {
prime = false;
break;
}
}
}
if (prime)
document.getElementById("ans").innerHTML = n + " is Prime";
else
document.getElementById("ans").innerHTML = n + " is Not Prime";
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Factorial Program</title>
<script>
function calculateFactorial() {
let num = document.getElementById("num").value;
let fact = 1;
for (let i = 1; i <= num; i++) {
fact = fact * i;
}
document.getElementById("result").innerHTML =
"Factorial is: " + fact;
}
</script>
</head>
<body>
<h2>Factorial Calculator</h2>
Enter Number:
<input type="number" id="num"><br><br>
<button onclick="calculateFactorial()">Calculate</button>
<p id="result"></p>
</body>
</html>If user enters: 5 Output will be: Factorial is: 120
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background: url("xyz.png") no-repeat top right;
}
</style>
</head>
<body>
<h2>CSS Background Example</h2>
<p>This page shows background image at top right corner.</p>
</body>
</html>Page will show text normally Image xyz.png will appear only once Image will be placed at top right corner of the page
<!DOCTYPE html>
<html>
<head>
<title>Day and Time</title>
</head>
<body>
<p id="demo"></p>
<script>
let now = new Date();
let days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
let day = days[now.getDay()];
let time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
document.getElementById("demo").innerHTML =
"Today is: " + day + "<br>" +
"Current time is: " + time;
</script>
</body>
</html>Today is: Tuesday. Current time is: 10 PM: 30:38
<!DOCTYPE html>
<html>
<head>
<title>Sum and Multiplication</title>
</head>
<body>
<h2>Sum and Multiplication of Two Numbers</h2>
<script>
// Declare two variables
var num1 = 10;
var num2 = 5;
// Calculate sum and multiplication
var sum = num1 + num2;
var multiply = num1 * num2;
// Display the result
document.write("First Number: " + num1 + "<br>");
document.write("Second Number: " + num2 + "<br><br>");
document.write("Sum = " + sum + "<br>");
document.write("Multiplication = " + multiply);
</script>
</body>
</html>First Number: 10 Second Number: 5 Sum = 15 Multiplication = 50
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
</head>
<body>
<h2>JavaScript Functions</h2>
<input type="button" value="Popup"
onclick="alert('Welcome to JavaScript')">
<input type="button" value="Redirect"
onclick="location.href='https://www.google.com'">
<input type="button" value="Print"
onclick="window.print()">
</body>
</html>JavaScript Functions [ Popup ] [ Redirect ] [ Print ]
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Hello World in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h2>{{ "Hello World" }}</h2>
</body>
</html>Hello World
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Event Registration</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Event Registration</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Email">
</div>
<button class="btn btn-primary">
Register
</button>
</form>
</div>
</body>
</html>-----------------------------------------
Event Registration
-----------------------------------------
Name
[____________________________]
Email
[____________________________]
[ Register ]
-----------------------------------------
<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h2>{{"AngularJS"}}</h2>
<input type="text" ng-init="name='AngularJS'" ng-model="name">
</body>
</html>AngularJS +----------------------+ | AngularJS | +----------------------+
<!DOCTYPE html>
<html>
<head>
<title>Addition of Two Numbers</title>
<script>
function addNumbers()
{
// Input Box рд╕реЗ Values рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
// Addition
var sum = num1 + num2;
// Result рджрд┐рдЦрд╛рдПрдБ
alert("Sum = " + sum);
}
</script>
</head>
<body>
<h2>Addition of Two Numbers</h2>
Enter First Number:
<input type="text" id="num1"><br><br>
Enter Second Number:
<input type="text" id="num2"><br><br>
<input type="button" value="Add" onclick="addNumbers()">
</body>
</html>Enter First Number: 25 Enter Second Number: 15 Click Add Button Alert: Sum = 40
<!DOCTYPE html>
<html>
<head>
<title>Current Date</title>
</head>
<body>
<p id="demo"></p>
<script>
let now = new Date();
let date = now.getDate() + "/" +
(now.getMonth() + 1) + "/" +
now.getFullYear();
document.getElementById("demo").innerHTML =
"Current Date is: " + date;
</script>
</body>
</html>Current Date is: 18/7/2026
<!DOCTYPE html>
<html>
<head>
<title>Current Time</title>
</head>
<body>
<p id="demo"></p>
<script>
let now = new Date();
let time = now.getHours() + ":" +
now.getMinutes() + ":" +
now.getSeconds();
document.getElementById("demo").innerHTML =
"Current Time is: " + time;
</script>
</body>
</html>Current Time is: 16:13:6