Scribd
Upload
51 views11 pages

WTP Practical GAURAV & PRATIK

Uploaded by

honeytpatel
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
51 views11 pages

WTP Practical GAURAV & PRATIK

Uploaded by

honeytpatel
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/ 11

( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

1. HTML Basics: Create a simple HTML document with headings, paragraphs, lists, links, images, and
tables.

Program:-

<!DOCTYPE html>
<html>

<head>

<title>HTML Basics Example</title>


</head>

<body>

<h1>THIS IS H1 TAG TEXT</h1>


<h2>THIS IS H2 TAG TEXT</h2>
<h3>THIS IS H3 TAG TEXT</h3>

<p>This is a paragraph of text </p>

<h3>Unordered List</h3>
<ul>
<li>C.LANG</li>
<li>JAVA</li>
<li>WTP</li>
</ul>

<h3>Ordered List</h3>
<ol>
<li>Learn C.LANG</li>
<li>Learn JAVA</li>
<li>Learn WTP</li>
</ol>

<h3>Links</h3>
<p>Visit <a href="https://www.gtu.ac.in" target="_blank">GTU</a> to learn more about Study.</p>

<h3>Images</h3>
<img src="D:\MCA\sallogo.jpg" alt="Placeholder Image" width="150" height="150">

<h3>Table</h3>
<table border="1">
<tr>
<th>Language</th>
<th>Difficulty</th>
</tr>
<tr>
<td>WTP</td>
<td>Easy</td>
</tr>

1
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

<tr>
<td>C.LANG</td>
<td>Moderate</td>
</tr>
<tr>
<td>JAVA</td>
<td>Challenging</td>
</tr>
</table>

</body>

</html>

OUTPUT :-

2
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

2. HTML Forms: Design a form with various input types and validate it using HTML5 attributes.

Program:-

<!DOCTYPE html>
<html>

<head>

<title>Example of HTML Form</title>


</head>

<body>

<h1>Registration Form</h1>

<form action="#" method="post">

<label for="name">Full Name:</label>


<input type="text" id="name" name="name" placeholder="Enter your full name">
<br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password"
required minlength="8">
<br><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>
<br><br>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
<br><br>

<label for="CITY">City:</label>
<select id="city" name="city" required>
<option value="">Select your city</option>
<option value="usa">AHEMDABAD</option>
<option value="uk">SURENDRANAGR</option>
<option value="india">RAJKOT</option>
3
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

</select>
<br><br>

<label for="profilepic">Upload Profile Picture:</label>


<input type="file" id="profilepic" name="profilepic" required>
<br><br>

<label for="bio">Short Bio:</label>


<textarea id="bio" name="bio" rows="4" cols="50" placeholder="Tell us a little about yourself"
required></textarea>
<br><br>

<button type="submit">Submit</button>

</form>

</body>

</html>

OUTPUT :-

4
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

3. CSS Styling: Apply CSS to an HTML document to style text, borders, backgrounds, and layouts
using the Box Model.

Program:-

<!DOCTYPE html>
<html>

<head>

<title>Simple Box Model</title>


<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

.content {
background-color: #e0e0e0;
padding: 20px;
margin: 20px;
border: 2px solid #ccc;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>

<body>

<header>
<h1>Simple Box Model Example</h1>
</header>

<div class="content">
<p>This is a simple paragraph with some padding, border, and margin.</p>
</div>

5
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

<footer>
<p>Footer content here.</p>
</footer>

</body>

</html>

OUTPUT :-

6
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

4. Responsive Design: Create a responsive webpage using CSS media queries

Program:-

<!DOCTYPE html>
<html>
<head>
<title>Colorful Responsive Design</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #333;
}

header {
background-color: #ff6f61;
color: #fff;
padding: 25px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

header h1 {
font-size: 2.5em;
}

main {
padding: 20px;
text-align: center;
}

main p {
font-size: 1.5em;
background-color: #fff3b0;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

footer {
background-color: #6a0572;
color: #fff;
text-align: center;
padding: 15px;
position: absolute;
width: 100%;
bottom: 0;
}

7
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

@media screen and (max-width: 768px) {


body {
background: linear-gradient(to right, #2193b0, #6dd5ed);
}

header {
background-color: #2193b0;
}

main p {
background-color: #b0f4ff;
}

footer {
background-color: #4b0082;
}
}

@media screen and (max-width: 480px) {


header h1 {
font-size: 1.8em;
}

main p {
font-size: 1.2em;
padding: 10px;
}

footer {
padding: 10px;
}

body {
background: linear-gradient(to right, #ffafbd, #ffc3a0);
}
}

</style>
</head>
<body>
<header>
<h1>Colorful Responsive Webpage</h1>
</header>
<main>
<section class="content">
<p>Welcome to a vibrant and responsive webpage! Resize your browser to see the magic of media
queries.</p>
</section>
</main>
<footer>
<p>Footer Section with Style</p>
</footer>

8
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

</body>
</html>

OUTPUT :-

9
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

5. JavaScript Basics: Write a JavaScript script to perform basic arithmetic operations and manipulate
the DOM.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>Simple Arithmetic Operations</title>
<script>
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);

const sum = num1 + num2;


const sub = num1 - num2;
const mul = num1 * num2;
const quotient = num2 !== 0 ? (num1 / num2) : 'Cannot divide by zero';

document.getElementById('result').innerHTML = `
Sum: ${sum} <br>
Subtraction: ${sub} <br>
Multiplication: ${mul} <br>
Quotient: ${quotient}
`;
}

</script>
</head>
<body>

<h1>Arithmetic Operations</h1>

<div>
<label for="num1">Number 1: </label>
<input type="number" id="num1">
</div>

<div>
<label for="num2">Number 2: </label>
<input type="number" id="num2">
</div>

<button onclick="calculate()">Calculate</button>

<h2>Results:</h2>
<p id="result"></p>

</body>
</html>

10
( WTP PRACTICAL ASSIGNMENT ) | GAURAV & PRATIK

OUTPUT :-

11

You might also like