Scribd
Upload
64 views

Web and Tech PROGRAM

Uploaded by

rk9709831659
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

Web and Tech PROGRAM

Uploaded by

rk9709831659
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Internet & Web Technology

List of programs

1. To create a simple student bio-data form using html5 . it should contain the
following name (text box), address (multiline text box),gender (radio button
male,female),skill sets known (check boxes – c,c++,java,C#etc), extra curricular
activities (text box), nationality (combobox) ,submit and reset button.

CODE :-

<html>
<body>
<form>
Name <br/>
<input type="text" size="30" value="ABC">
<br/><br/>
Password <br/>
<input type="password" >
<br/><br/>
Phone<br/>
<input type="tel" name="Phone" maxlength="10">
<br/><br/>
Gender
<input type="radio" name="gender" value="M" checked>Male
<input type="radio" name="gender" value="F">Female
<br/><br/>
Languages known
<input type="checkbox">Telugu
<input type="checkbox" checked>English
<input type="checkbox">Hindi
<br/><br/>
Eduction
<Select>
<option>Graduation</option>
<option selected>Post Graduation</option>
</Select>
<br/><br/>
skills
<input type="checkbox">C
<input type="checkbox" checked>C++
<input type="checkbox">JAVA
<br>
<br>
Address <br/>
<textarea rows="5" cols="30" style="resize: none;"></textarea>
<br/><br/>
Nationality
<Select>
<option>Indian</option>
<option selected>Other</option>
</Select>
<br>
<br>
Extra curricular activities <br/>
<textarea rows="5" cols="30" > </textarea>
<br/><br/>
<input type="file">
<br/><br/>
<input type="reset" value="Reset">
<input type="submit" value="Submit Form">
</form>
</body>
</html>

Output:-
2. To create an html page with different types of frames such as floating frame,
navigation frame & mixed frame.

CODE:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Example</title>
<style>
/* Styling for floating frame */
.floating-frame {
width: 300px;
height: 300px;
float: right;
margin: 20px;
border: 2px solid #000;
}
/* Styling for navigation frame */
#nav-frame {
width: 30%;
height: 100%;
border: 2px solid #333;
float: left;
}

/* Styling for mixed frame (content area) */


#content-frame {
margin-left: 32%;
height: 100%;
border: 2px solid #333;
}

iframe {
width: 100%;
height: 100%;
border: none;
}

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>

<!-- Floating Frame -->


<div class="floating-frame">
<iframe src="https://www.example.com"></iframe>
</div>

<!-- Navigation Frame -->


<div id="nav-frame">
<iframe src="navigation.html"></iframe>
</div>

<!-- Mixed Frame (Main Content Area) -->


<div id="content-frame">
<iframe src="content.html"></iframe>
</div>
</body>
</html>

OUTPUT:-

3.Design the webpage by applying the different styles using inline, external & internal
style sheets.

CODE:- Step 1: Create the HTML file with Inline, Internal, and External CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Webpage Example</title>
<!-- External Stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Internal Stylesheet -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

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

.nav {
width: 20%;
background-color: #f1f1f1;
padding: 15px;
float: left;
height: 100vh;
}

.content {
margin-left: 22%;
padding: 15px;
}
.footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<!-- Header Section -->


<div class="header">
<h1>My Webpage</h1>
</div>

<!-- Navigation Section with Inline Style -->


<div class="nav" style="border-right: 2px solid #333;">
<h2>Navigation</h2>
<p><a href="#">Home</a></p>
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
<p><a href="#">Contact</a></p>
</div>

<!-- Content Section -->


<div class="content">
<h2>Welcome to My Webpage</h2>
<p>This is an example of how to use inline, internal, and external styles in an HTML
document.</p>
<p style="color: red; font-weight: bold;">This paragraph uses inline styles to change
its text color and font weight.</p>
</div>

<!-- Footer Section -->


<div class="footer">
<p>Footer Content</p>
</div>

</body>
</html>

Step 2: Create an External CSS File (styles.css)

/* External Stylesheet */

body {
background-color: #f8f8f8;
}

a{
text-decoration: none;
color: #4CAF50;
}

a:hover {
text-decoration: underline;
}

.content

OUT PUT

4. Write a java script program to read .XML file and display data in a neat format.
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read and Display XML Data</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid black;
}

th, td {
padding: 8px;
text-align: left;
}

th {
background-color: #4CAF50;
color: white;
}

h1 {
color: #4CAF50;
}
</style>
</head>
<body>
<h1>XML Data Display</h1>

<!-- Container to display the XML data -->


<div id="xmlDataContainer"></div>

<script>
// Function to load XML file and display data
function loadXMLData() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
displayXMLData(this);
}
};
// Load the XML file
xhttp.open("GET", "data.xml", true);
xhttp.send();
}

// Function to display XML data in a table


function displayXMLData(xml) {
const xmlDoc = xml.responseXML;
const employees = xmlDoc.getElementsByTagName("employee");

let table =
"<table><tr><th>ID</th><th>Name</th><th>Position</th><th>Salary</th></tr>";

// Loop through the XML and create table rows


for (let i = 0; i < employees.length; i++) {
let id = employees[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
let name =
employees[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
let position =
employees[i].getElementsByTagName("position")[0].childNodes[0].nodeValue;
let salary =
employees[i].getElementsByTagName("salary")[0].childNodes[0].nodeValue;

table += "<tr><td>" + id + "</td><td>" + name + "</td><td>" + position + "</td><td>"


+ salary + "</td></tr>";
}

table += "</table>";
document.getElementById("xmlDataContainer").innerHTML = table;
}

// Load the XML data on page load


window.onload = function() {
loadXMLData();
};
</script>

</body>
</html>

OUT PUT
5. To write a Javascript program to define a user defined function for sorting the
values in an array. Use HTML5 for user interface.

CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Sorting in JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f5f5f5;
}

input, button {
padding: 10px;
margin: 10px 0;
font-size: 16px;
}

button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

#result {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}

h1 {
color: #4CAF50;
}
</style>
</head>
<body>

<h1>Array Sorting Application</h1>

<!-- User Interface -->


<p>Enter comma-separated numbers to sort:</p>
<input type="text" id="userInput" placeholder="e.g., 5, 3, 8, 1, 4">
<br>
<button onclick="sortArray()">Sort Array</button>

<!-- Display Result -->


<div id="result"></div>

<script>
// Function to sort an array
function sortArray() {
// Get input from the user
let input = document.getElementById("userInput").value;

// Convert input string to an array of numbers


let array = input.split(',').map(Number);

// Sort the array using a user-defined sort function


array.sort(function(a, b) {
return a - b;
});

// Display the sorted array


document.getElementById("result").innerHTML =
"<strong>Sorted Array:</strong> " + array.join(', ');
}
</script>

</body>
</html>

OUT PUT

6. Write a jsp servlet program to implement the single text field calculator.

CODE :-

<html>
<title>calculator</title>
<head><h1><center>Basic Calculator</center></h1></head>
<body>
<center>
<form action="calculator.jsp" method="get">
<label for="num1"><b>Number 1</b></label>
<input type="text" name ="num1"><br><br>
<label for = "num2"><b>Number 2</b></label>
<input type="text" name="num2"><br><br>
<input type ="radio" name = "r1" value="Add">+
<input type = "radio" name = "r1" value="Sub">-<br>
<input type="radio" name="r1" value ="mul">*
<input type = "radio" name="r1" value="div">/<br><br>
<input type="submit" value="submit">
</center>
</body>
</html>
calculator.jsp
<html>
<title>calculator</title>
<head></head>
<body>
<%@page language="java"%>
<%
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
String operation = request.getParameter("r1");
if(operation.equals("Add")){
int add=num1+num2;
out.println("Addition is: "+add);
}
else if(operation.equals("Sub")){
int sub=num1-num2;
out.println("Substraction is: "+sub);
}
else if(operation.equals("mul")){
int mul=num1*num2;
out.println("multiplication is: "+mul);
}
else if(operation.equals("div"))
{
int div = num1/num2;
if(num1>=num2)
out.println("division is: "+div);
else
}
out.println("The division cannot be performed");
>
</body>
</html>
Output:

7. Write a program to display different style of heading


text
Code :- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
/* Custom styles for headings */
h1 {
color: #3498db;
font-family: 'Arial', sans-serif;
}
h2 {
color: #27ae60;
font-family: 'Georgia', serif;
}
h3 {
color: #e74c3c;
font-family: 'Courier New', monospace;
}
h4 {
color: #f39c12;
font-family: 'Helvetica', sans-serif;
}
h5 {
color: #8e44ad;
font-family: 'Times New Roman', serif;
}
h6 {
color: #2c3e50;
font-family: 'Verdana', sans-serif;
}
</style>
<title>Styled Headings</title>
</head>
<body>
<h1>This is Jagannath University</h1>
<h2>I am a student of MCA Student</h2>
<h3>This is my class room</h3>
<h4>I am reading web technology</h4>
<h5>Salendra sir is my teacher</h5>
<h6>he is an honest person</h6>
</body>
</html>
OUT OUT:-

8. Write an html code for creates the ordered list


Code :- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ordered List Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol>
<li>India is the first in population.</li>
<li>China is the second in population.</li>
<li>Other are below.</li>
</ol>
</body>
</html>

OUT PUT

9. . Create a web page with field username, password,


date of birth, email and gender or contact no.
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

form {
max-width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 8px;
}

input, select {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}

button {
background-color: #3498db;
color: #fff;
padding: 10px 15px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>

<form id="registrationForm" onsubmit="return validateForm()">


<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="date">Date:</label>
<input type="date" id="date" name="date" required>

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


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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="contactNumber">Contact Number:</label>


<input type="tel" id="contactNumber" name="contactNumber" pattern="[0-9]{10}"
placeholder="Enter 10-digit number" required>

<button type="submit">Register</button>
</form>

<script>
function validateForm() {
// Perform additional validation if needed
return true;
}
</script>

</body>
</html>
OUT PUT
10. Create a HTML registration form and to validate the
form using javascript code
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
}

form {
max-width: 400px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 8px;
}

input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}

button {
background-color: #3498db;
color: #fff;
padding: 10px 15px;
border: none;
cursor: pointer;
}

.error {
color: #e74c3c;
margin-top: 5px;
}
</style>
</head>
<body>

<h1>Registration Form</h1>

<form id="registrationForm" onsubmit="return validateForm()">


<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword" required>

<button type="submit">Register</button>
</form>

<script>
function validateForm() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;

// Simple validation example (you can customize this based on your requirements)
if (username.trim() === '' || email.trim() === '' || password.trim() === '' ||
confirmPassword.trim() === '') {
alert('All fields are required');
return false;
}

if (password !== confirmPassword) {


alert('Password and Confirm Password do not match');
return false;
}

return true;
}
</script>

</body>
</html>
OUT PUT

You might also like