Scribd
Upload
12 views16 pages

Wde Record 2

Uploaded by

pragadeshramg.cse2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views16 pages

Wde Record 2

Uploaded by

pragadeshramg.cse2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

1.

<html>

<head>

<title> HTML BASIC : </title>

</head>

<body >

<u><h1 style="color:blue;"> HTML BASIC</u> </h1>

<p style="color : white;"><i><li><ul type="square">

<li>HTML stands for Hyper Text Markup Language</li>

<li>HTML is the standard markup language for creating webpages</li>

<li>HTML describes the structure of a webpage</i></li>

</ul></i>

</p>

<h2> TEXT ELEMENTS </h2>

<p style = "text-color:white;">

<ol type= "1">

<li><b> bold </b></li>

<i><li> italics</li></i>

<li><strong> strong</strong></li>

<li><mark> mark </mark></li>

<li><insert> insert</insert></li>

<u><li> underline</li></u>

<li><small> small</small></li>

</ol></p>

</body>

</html>
2.<head>

<title> Registration form </title>

</head>

<body><center>

<h1>registration form</h1>

</center>

<p>Greetings from our college.The students are requested to fill the below form

sincerely and accurately. This is the important detail about the students so dont

share this form to anyone.These details travel with you not only for four years but

it travel with your for your whole life. so recheck the form more than two to three

times because after submitted it cant be changed.so be carefull.we promise that we

keep your personal details confidential as much as we can .</p>

<form>

<label> Name: </label><br>

<input type = "text" placeholder= "Enter your Name"> <br>

<label> course:</label><br>

<select><option value = "Btech">Btech</option>

<option value="BE">BE</option></select>

<br>

<label> Gender:</label><br>

<select><option value = "Male">Male</option>

<option value = "Female">Female</option></select>

<br></tr>

<label> Email :</label><br>

<input type="text" placeholder = "Enter your Email"> <br>

<label> mobile no:</label> <br>

<input type = "number" placeholder="Enter Your Number"><br>

<label> Address </label><br>


<input type="text" placeholder ="Enter Your Address"><br>

<label> DOB </label><br>

<input type ="DOB" placeholder = "DD/MM/YYYY"> <br>

<input type= "submit"> <br>

</form>

<a href="https://youtu.be/Ux_3wQpKu7I?si=8_X0kvmF-y7ArhjN">to learn more

about our c</a>

</body>

</html>

3.<html>

<head>

<title>Healthy and Unhealthy Foods</title>

</head>

<body>

<h1>Healthy vs. Unhealthy Foods</h1>

<h2>Healthy Foods: </h2>

<ol>

<li>Fruits</li>

<li>Vegetables</li>

<li>Whole Grains</li>

<li>Nuts and Seeds</li>

<li> Chicken & Fish</li>

</ol>

<h2>Unhealthy Foods: </h2>

<ul>

<li>Fried Foods</li>
<li>Sugary Beverages </li>

<li>Processed Snacks </li>

<li>Fast Food</li>

<li>High-Sugar Desserts </li>

</ul>

<h2><u>Comparison of Healthy and Unhealthy Foods </u></h2>

<table border="1">

<tr>

<th>Healthy Food</th>

<th>Unhealthy Food</th>

<th>Benefit/Consequence</th>

</tr>

<tr>

<td>Fresh Fruits</td>

<td>Candy Bars</td>

<td>Fruits provide vitamins; candy increases sugar intake.</td>

</tr>

<tr>

<td>Grilled Chicken</td>

<td>Fried Chicken</td>

<td>Grilled is lower in fat; fried adds extra calories.</td>

</tr>

<tr>

<td>Whole Grain Bread</td>

<td>White Bread</td>

<td>Whole grains offer more fiber and nutrients.</td>

</tr>

<tr>

<td>Water</td>

<td>Sugary Soda</td>

<td>Water hydrates; soda can lead to weight gain.</td>


</tr>

</table>

</body>

</html>

4.<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Simple Web Page</title>
<link rel="stylesheet" href="c.css">
</head>
<body>
<header>
<h1>Welcome to my webpage</h1>
<p>Learn HTML and CSS basics</p>
</header>
<nav> <ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to our homepage!We're glad to have you here.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our company,mission and values.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>We offer a vareity of services to meet your needs.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Get in touch with us for more information.</p>
</section>
</main>
<footer>
<p>&copy;2024 My Web Page.All rights reserved.</p>
</footer>
</body> </html>

CSS
body{

font-family:Arial,sans-
serif; margin:0; padding:0;
background-color:#f9f9f9
line height:1.6; color:#333;
}

header background-
color:#4CAF50;
color:white; padding:20px;
text align:center; } nav ul{
list style:none; background-
color:#333; display:flex;
justify-content:center;
padding:10px;
}

nav ul li{
margin:0 15px;
}

nav ul li a:hover{
color:#4CAF50;
}
main{
padding:20px;
}

section{ margin
bottom:20px;
}

section h2{
color:#4CAF50;
} footer{ background-
color:#33;
color:white; text-
align:center;
padding=10px;
margin-top:20px;
}

5.<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fitness and Wellness</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Fitness and Wellness</h1>

<p>Your journey to a healthier life starts here!</p>

</header>

<nav>
<a href="#workouts">Workouts</a>

<a href="#nutrition">Nutrition</a>

<a href="#mindfulness">Mindfulness</a>

<a href="#blog">Blog</a>

<a href="#contact">Contact</a>

</nav>

<section id="workouts">

<h2>Workout Routines</h2>

<div class="grid-layout">

<div>

<h3>Cardio</h3>

<p>High-energy routines to get your heart rate up and burn calories.</p>


</div>

<div>

<h3>Strength</h3>

<p>Build muscle and increase your strength with targeted exercises.</p>

</div>

<div>

<h3>Yoga</h3>

<p>Improve flexibility and mental clarity with guided yoga sessions.</p>

</div>

<div>

<h3>Stretching</h3>

<p>Essential stretches for better flexibility and injury prevention.</p>

</div>
</section>

</body>

</html>
CSS
body { font-family: Arial,

sans-serif; margin: 0;

padding: 0;

header { background-color:

#28a787; color: cyan;

text-align: center; padding:

1.5em;

nav { display: flex;

justify-content: center;

background-color: #334;

nav a { color:white;

padding: 1em; text-

decoration: none;

nav a:hover { background-

color: #554;

}
#workouts { padding: 2em;

text-align: center;

background-color: #f9f7f9;

.grid-layout { display: grid;

grid-template-columns: 1fr 1fr;

gap: 1em; margin-top: 1em;

.grid-layout div {

background-color: #e0e0e0;

padding: 1em; border-radius:

5px;

6.<!DOCTYPE html>
<html>

<head>

<title>ODD OR EVEN</title>

</head>

<body >

<h1 align="center">CHECK ODD OR EVEN NUMBER</h1>

<h2 align="center" id="num"></h2>

<script>

let a = prompt("ENTER A NUMBER"); if(a%2==0){

document.getElementById("num").innerHTML = a+" is a Even Number";

} else{
document.getElementById("num").innerHTML = a+" is a Odd Number";
}

</script>

</body>

</html>

7.<!DOCTYPE html>

<html>

<head>

<title>natural numbers</title>

</head>

<body>

<h1 align="center">SUM OF NATURAL NUMBERS</h1>

<h2 align="center" id="num"></h2><script>

const n = prompt("ENTER A NUMBER TO FIND SUM OF NATURAL NUMBERS");

let sum = 0; for(i=1 ; i<=n ; i++){ sum += i;

document.getElementById("num").innerHTML="Sum of "+n+" Natural Numbers is "+sum;

</script>

</body>

</html>
8.<!DOCTYPE html>
<html>

<body>

<h2>JavaScript can Change HTML</h2> <p id="p1">Chennai </p>

<script> document.getElementById("p1").innerHTML = "Hi I have changed now";


</script>

<p>The paragraph above was changed by a script.</p>


</body>

</html>

9.1.DOCTYPE html>

<html<!>
<head>

<meta cahrset=""UTF-8>

<meta http-equi=""X-UA-Compatible content="IE=edge">


<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>Mouse Events in java script</title>

<style> div{ height:


200px; width: 200px;
margin: 10px; padding:

10px; color:orange;
background-color: green;
border: 7px solid black;

display: flex; justify-


content: center; align-
items: center; font-

weight: bolder;
}
</style>
</head>

<body>

<div id="add"></div>

<script> let
div=document.getElementById('add');

div.addEventListener('mouseover',(event)=>{

div.innerText="Place your mouse over this"

});

</script>
</body>
</html>

9.2.<!DOCTYPE html>

<html>

<head>
<title>

Key downfuction in java script


</title>
<style>
#datas{

color:green;

</style>
</head>

<body>

<h2>JAVASCRIPT KEYUP METHOD</h2>


<div id="demoDIV">
The javascipt keyup function works after pressing th key and the key in the down position of
the specific tag
</div>
<input type="text" id="input_class" placeholder="Write here"
onkeydown="KeyUpFunction()"></input>

<p id="datas"></p>
<script> function

KeyUpFunction(){

alert("Javascript keyUp function activated sucessfully!!!!!!");


document.getElementById("datas").innerHTML="Javascript KeyUp function activated
sucessfully";
}

</script>

</body>

</html>

9.3<!DOCTYPE html>
<html>

<body>

<label for="state">Select a state:</label>


<select id="state" onchange="handleChange()">

<option value="KERALA">KERALA</option>

<option value="KARNATAKA">KARNATAKA</option>
<option value="DELHI">DELHI</option>
<option value="TAMIL NADU">TAMIL NADU</option>

</select>

<p id="txt"></p> <script> function handleChange() { var


selectedState = document.getElementById('state').value;
document.getElementById("txt").textContent=
"Selected state: "+selectedState;
}
</script>

</body>

</html>

10.<!DOCTYPE html>

<html>
<body>

<h1>Set Timeout</h1>

<h2>Method for setTimeout() and clearTimeout() </h2>


<p>Click here to stop happy friendship day() to execute. (You have 3 seconds)</p>

<button onclick="myStopFunction()">Stop!</button>

<h2 id="demo"></h2>

<script>
const myTimeout = setTimeout(myGreeting, 3000); function

myGreeting() {

document.getElementById("demo").innerHTML = "HAPPY FRIENDSHIP DAY!!!!" }


function hbd() { clearTimeout(myTimeout);
}
</script>

</body>

</html>
11.<!DOCTYPE html>
<html>

<body>

<h1>JavaScript Callback</h1>

<p>calculation using Javascript call back function</p>


<p>The product of 10 and 10 is:</p>

<p id="demo"></p> <script> function myfunction(some)


{ document.getElementById("demo").innerHTML =

some;
}

function myCalculator(num1, num2) {


let product = num1 * num2; return
product; }
let result = myCalculator(10, 10); myfunction(result);

</script>

</body>

</html>

You might also like