Lab 1
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>LAB 1</title>
</head>
<body>
<h1 style=”color: red;”>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia esse
earum quae tempore temporibus odit vel cum dignissimos cumque et illo
placeat blanditiis commodi reprehenderit unde veritatis iure nobis molestiae
rerum veniam, beatae saepe? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit accusantium magnam, odit laborum doloremque
excepturi reprehenderit aliquid id perspiciatis eaque architecto eveniet saepe
placeat harum officiis sit, molestias voluptatem obcaecati nemo temporibus
quam in similique? Autem mollitia sunt eos. Fugiat delectus excepturi labore
ea quidem similique laudantium libero aspernatur ipsam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
beatae saepe tenetur. Mollitia assumenda et, inventore expedita obcaecati
quibusdam provident aperiam? Quis exercitationem voluptatem asperiores,
corporis explicabo maxime nesciunt cupiditate. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nulla sequi earum quam culpa unde. Atque
quaerat nobis quibusdam labore quis, cumque quas explicabo a nulla. Ut
veritatis ullam accusantium impedit?</p>
<img src=”vk.webp” alt=”” height=”250px” width=”350px”><br>
<img src=”vk.webpa” alt=”no pic” height=”250px”l width=”350px”>
<br>
<audio controls>
<source src=”song.mp3”>
</audio>
<button onclick=”window.print()”>Print</button>
</body>
</html>
Lab 2
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>Form Validation</title>
<style>
.error { color: red; }
</style>
</head>
<h2>Form Validation</h2>
<form id=”registrationForm”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”age”>Age:</label>
<input type=”number” id=”age” name=”age” required><br><br>
<label for=”phone”>Phone Number:</label>
<input type=”text” id=”phone” name=”phone” required><br><br>
<button type=”submit”>Submit</button>
<p id=”errorMsg” class=”error”></p>
</form>
<script>
Document.getElementById(‘registrationForm’).addEventListener(‘submit’,
function(event) {
Event.preventDefault();
// Get form values
Const name = document.getElementById(‘name’).value.trim();
Const age = document.getElementById(‘age’).value;
Const phone = document.getElementById(‘phone’).value.trim();
Const errorMsg = document.getElementById(‘errorMsg’);
// Clear previous error messages
errorMsg.textContent = ‘’;
// Validate the form fields
If (name === ‘’) {
errorMsg.textContent = ‘Name is required.’;
return;
If (age === ‘’ || age < 18) {
errorMsg.textContent = ‘Age is required and must be 18 or above.’;
return;
If (phone === ‘’ || isNaN(phone) || phone.length !== 10) {
errorMsg.textContent = ‘Phone number is required, must be a number,
and must be exactly 10 digits.’;
return;
// Submit the form if all validations pass
Alert(‘Form submitted successfully!’);
// Optionally: document.getElementById(‘registrationForm’).submit(); // If
you want to actually submit the form
});
</script>
</body>
</html>
Lab 3
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>LAB 3</title>
</head>
<body>
<p id=”abc”> </p>
<p id=”ab”> </p>
<p id=”a”></p>
<h1 id=”zx”>Tanmai</h1>
<button onclick=”change_colour()”>CHANGE COLOUR</button>
<br><br>
<p>
<img id=”bulb” src=”bulboff.png” alt=””>
</p>
<button onclick=”onbulb()” id=”btn”>On</button> <br><br>
<button onclick=”window.print()”>Print</button>
<script>
Const array=[“one”,”two”,”three”];
Let text= “”;
For(let i=0; i<array.length; i++)
Text += array[i]+ “<br>”;
Document.getElementById(“abc”).innerHTML=text;
Const object={ name:”Tanmai”, class:”Sybca”,div:”B”};
Let text1=””
For (let x in object){
Text1+= object[x]+ “<br> “;
Document.getElementById(“ab”).innerHTML=text1;
Let text3 =”Tanmai”;
Text_Print=””
For(let x of text3)
Text_Print+= x+ “”;
Document.getElementById(“a”).innerHTML=text_Print;
Function change_colour(){
Document.getElementById(“zx”).style.color=”red”;
}
Function onbulb(){
Let button = document.getElementById(“btn”);
Let bulb = document.getElementById(“bulb”);
If (button.innerHTML==”On”) {
Bulb.src=”bulbon.png”;
Button.innerHTML=”Off”;
Else
Button.innerHTML=”On”;
Bulb.src=”bulboff.png”;
</script>
</body>
</html>
Lab 4
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>LAB 4</title>
</head>
<body>
<form action=”” onsubmit=”return submitfrm()” id=”frm”>
<label for=”name”></label> Name:</label>
<input type=”text” name=”name” id=”ab” ><br>
<label for=”age”>Age</label>
<input type=”number” name=”Age” ><br>
<label for=”phno”>Phone NO:</label>
<input type=”number” name=”phno” > <br>
<input type=”submit” value=”submit”>
</form> <br>
<button onclick=”window.print()”>Print</button>
<script>
Function submitfrm(){
Let a=document.forms[“frm”][“name”].value;
Let b=document.forms[“frm”][“Age”].value;
Let c=document.forms[“frm”][“phno”].value;
If(a==””){
Window.alert(“Enter Name”);
Return false;
}
Else if(b>=18 && b==””)
Window.alert(“”);
Return false;
Else if(c==””)
Window.alert(“no age enter”);
Return false;
Else if(d==””)
Window.alert(“Enter Password”);
Return false;
Return true;
</script>
</body>
</html>
Lab 5
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>LAB 5</title>
<style>
#color{
Background-color: aqua;
#inp{
Background-color: aqua;
</style>
</head>
<body>
<h1 onclick=”this.innerHTML=’Change’” >Change Text</h1>
<h1 id=”color”onmouseover=”colorch(this)”
onmouseout=”colorch2(this)”>Color change</h1>
<input id=”inp” type=”text” onkeydown=”colorch(this)”
onkeyup=”colorch2(this) “>
<p id=”para2” >Bodke</p>
<div id=”data1”>
<p id=”p1”>Kashi Boyz</p>
<p id=”p2”>Madhu Boyz</p>
</div>
<button onclick=”window.print()”>Print</button>
<script>
Function colorch(col) {
Col.style.backgroundColor=”red”;
Function colorch2(col) {
Col.style.backgroundColor=”aqua”;
Const par=document.createElement(“p”);
Const cld=document.createTextNode(“Tanmai”);
Par.appendChild(cld);
Document.body.appendChild(par);
Const bodypara=document.getElementById(“para2”);
Document.body.insertBefore(par,bodypara);
Const par1=document.getElementById(“data1”);
Const cld1=document.getElementById(“p1”);
Par1.removeChild(cld1);
</script>
</body>
</html>
Lab 6
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>Lab 6</title>
</head>
<body>
<button onclick=”show()”>Show</button>
<button onclick=”hide()”>Hide</button>
<p id=”ab”>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum
qui est in, ab saepe voluptate non sint excepturi culpa eos velit? Sequi
recusandae adipisci harum doloribus nesciunt exercitationem. Facere,
accusantium?</p>
<button onclick=”window.print()”>Print</button>
<script>
// function show(){
//
fetch(https://jsonplaceholder.typicode.com/users).then(handleResponse).catc
h((err)=>{console.log(err)});
// }
// function handleResponse(response){
// response.json().then(handleData);
// }
// function handleData(data){
// console.log(data);
// let print= “”;
// for(let x in data){
// print += data[x].name + “<br>”;
// }
// document.getElementById(“ab”).innerHTML=print;
// }
Function hide(){
Const obj = {name:”Tanmai”, class:”TY BCA”, div:”B”};
Fetch(https://jsonplaceholder.typicode.com/Posts,{
Method: “POST”,
Body:JSON.stringify(obj),
Headers:{
“Content-Type”: “application/json;charset=UTF-8”
}).then(handleResponse).catch((err)=>{console.log(err)});
Function handleResponse(response){
Response.json().then(handleData);
}
Function handleData(data){
Console.log(data);
Let print= “”;
// for(let x in data){
// print += data[x].obj + “<br>”;
// }
Print= data.name;
Document.getElementById(“ab”).innerHTML=print;
</script>
</body>
</html>
Lab 7
<?xml version=”1.0” encoding=”UTF-8”?>
<Bookstore>
<Book category=”html”>
<Title>" Introduction To HTML "</Title>
<Author>Tanmai </Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
<Book category=”html”>
<Title>" Introduction To HTML "</Title>
<Author>Sanjit</Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
<Book category=”html”>
<Title>"Introduction To HTML"</Title>
<Author>Akash</Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
</Bookstore>
<!—How to get this sign in xml
<!-- > >
<!-- < <
<!-- & &
<!—‘’ !apos
<!—“” quot
Lab 8
File name : ex7.xml
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE Bookstore SYSTEM “valid.dtd”
[<!ENTITY quetsionmark “?”>]>
<Bookstore>
<Book category=”html”>
<Title>" Introduction To HTML "</Title>
<Author>Tanmai </Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
<Book category=”html”>
<Title>" Introduction To HTML "</Title>
<Author>Sanjit</Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
<Book category=”html”>
<Title>"Introduction To HTML"</Title>
<Author>Akash</Author>
<Price>50</Price>
<Year>2015</Year>
</Book>
</Bookstore>
<!—How to get this sign in xml
<!-- > >
<!-- < <
<!-- & &
<!—‘’ !apos
<!—“” quot
Lab 8
File name : valid.dtd
<!ELEMENT Bookstore (Book,Book,Book)>
<!ELEMENT Book (Title,Author,Price,Year)>
<!ELEMENT Title (#PCDATA)>
<!ELEMENT Author (#PCDATA)>
<!ELEMENT Price (#PCDATA)>
<!ELEMENT Year (#PCDATA)>
<!ATTLIST Book category CDATA #REQUIRED>
