Scribd
Upload
2K views21 pages

Web Programming Lab Manual

The document is a laboratory manual for the subject Web Programming. It contains instructions for 10 experiments related to HTML and JavaScript. The experiments include writing HTML code to display text with different tags, create tables, forms, frames and using JavaScript to display arrays and validate forms. The manual provides the detailed steps to perform each experiment and the expected output.

Uploaded by

Gangarathna Mani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
2K views21 pages

Web Programming Lab Manual

The document is a laboratory manual for the subject Web Programming. It contains instructions for 10 experiments related to HTML and JavaScript. The experiments include writing HTML code to display text with different tags, create tables, forms, frames and using JavaScript to display arrays and validate forms. The manual provides the detailed steps to perform each experiment and the expected output.

Uploaded by

Gangarathna Mani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 21

S.E.A.

COLLEGE OF ENGINEERING & TECHNOLOGY

Ekta Nagar, Basavanapur, Virgo Nagar (Post),

K.R. Puram, Bangalore-560 049.

DEPARTMENT OF AI & ML
IV SEMESTER

WEB PROGRAMMING

(2022-23)

SUBJECT CODE: 21CSL481

LABORATORY MANUAL

NAME OF THE STUDENT :

BRANCH : Artificial Intelligence & Machine Learning

UNIVERSITY SEAT NO. :

SEMESTER & SECTION : IV Sem SEC

BATCH :
Dept. of Artificial Intelligence & Machine Learning Web Programming

S.NO LAB EXPERIMENTS

1 a. Write a HTML code to display the message “HELLO WORLD”.


b. Write a HTML code to display “WEB PROGRAMMING” using various heading tags.

2 Write an HTML code to display your education details in a tabular format.

3 Write an HTML code to display your CV on a web page

4 Write an HTML code to create a Home page having three links: About Us, Our
Services and Contact Us. Create separate web pages for the three links.

5 Write an HTML code to create a login form. On submitting the form, the user should
get navigated to a profile page.

6 Write an HTML code to create a frameset having header, navigation and content
sections.

7 Write an HTML code to demonstrate the usage of inline CSS.

8 Write a Java script to prompt for users name and display it on the screen.

9 Design HTML form for keeping student record and validate it using Java script

10 Write a HTML code to list array elements using Java Script.

S.E.A College of Engineering & Technology Page 2


Dept. of Artificial Intelligence & Machine Learning Web Programming

1. a. Write a HTML code to display the message “HELLO WORLD”.

<html>
<head>
<title> HELLO WORLD </title>
<head>
<body>
HELLO WORLD !!!
</body>
</html>

Output:

S.E.A College of Engineering & Technology Page 3


Dept. of Artificial Intelligence & Machine Learning Web Programming

1. b. Write a HTML code to display “WEB PROGRAMMING” using various heading tags

<html>
<head>
<title> WEB PROGRAMMING </title>
<head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 1 </h2>
<h3> Heading 1 </h3>
<h4> Heading 1 </h4>
<h5> Heading 1 </h5>
<h6> Heading 1 </h6>
</body>
</html>

Output:

S.E.A College of Engineering & Technology Page 4


Dept. of Artificial Intelligence & Machine Learning Web Programming

2. Write an HTML code to display your education details in a tabular format.

<html>
<head>
<title>Education details</title>
</head>
<body>
<h1 align="center" style="color: blue">EDUCATION DETAILS</h1><br><br>
<table border="3” bordercolor="black" cellspacing="3" cellpadding="7">
<th>SNo</th>
<th>Course</th>
<th>University</th>
<th>College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>BE</td>
<td>VTU</td>
<td>SEACET</td>
<td>2015</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>MTECH</td>
<td>VTU</td>
<td>SEACET</td>
<td>2023</td>
<td>95</td>
</tr>
</table>
</body>
</html

Output:

S.E.A College of Engineering & Technology Page 5


Dept. of Artificial Intelligence & Machine Learning Web Programming

3. Write an HTML code to display your CV on a web page

<html>
<head>
<title>resume</title>
</head>
<body>
<h1 align="center" style="color:black">RESUME</h1><br>
<p style="text-align:left;">Student 1<br>
SEACET, Ekta Nagar<br> K R Puram
Bangalore-560016<br>
</p>
<p style="text-align:right;">Email:seacet@gmail.com<br>
contact number:1234567899<br>
</p>
<h3>Objective:</h3>
<p> I want to excel in the field of Internet of Things with hard work, perseverance and
dedication.</p>
<h3>Educational Qualifications:</h3>
<table border="3"background="purple" cellspacing="10" cellpadding="10"
brcolor="purple">
<th>SNo</th>
<th>Course</th>
<th> University</th>
<th>College</th>
<th>Year of passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>BE</td>
<td>VTU</td>
<td>SEACET</td>
<td>2018</td>
<td>80</td>
</tr>
<tr>
<td>2</td>
<td>MTECH</td>
<td>VTU</td>
<td>SEACET</td>
<td>2020</td>
<td>85</td>
</tr>
</table>
<h3>Techincal Skills:</h3>
<ul style="circle">
<li><b>Computer </b>:Python, Java, IoT, Artificial Intelligence, Data Science</li>
<li><b>Typing</b> :English
</ul>

S.E.A College of Engineering & Technology Page 6


Dept. of Artificial Intelligence & Machine Learning Web Programming

<h3>Hobbies:</h3>
<ul style="circle">
<li>Reading books, dancing ,newspaper</li>
</ul>
<h3>Experience:</h3>
<ul style="circle">
<li>ASUS PUBLICATION COMPUTER OPERATION</li>
</ul>
</head>
</body>
</html>

OUTPUT:

S.E.A College of Engineering & Technology Page 7


Dept. of Artificial Intelligence & Machine Learning Web Programming

4. Write an HTML code to create a Home page having three links: About Us, Our Services
and Contact Us. Create separate web pages for the three links.

Filename: pg3.html

<html>
<head>
<title>Computer Service</title>
</head>
<body bgcolor="silver">
<font size="8">
<a href="aboutus.html">ABOUT US</a> <br>
<a href="services.html">OUR SERVICES</a> <br>
<a href="contact.html">CONTACT US</a></font> <br>
</body>
</html>

Filename: aboutus.html

<html>
<head>
<title> ABOUT US </title>
</head>
<body>
<p> Our computer service is here to provide you with expert assistance. <br>Whatever your
needs may be, get in touch with us today.
<table>
<caption>
<b>Business Hours</b></caption>
<tr><td>Mon: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Tue: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Wed: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Thu: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Fri: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Sat: 10:00 AM – 7:00 PM</td></tr>
<tr><td>Sun: 10:00 AM – 7:00 PM</td></tr>
</p>
</body>
</html>

S.E.A College of Engineering & Technology Page 8


Dept. of Artificial Intelligence & Machine Learning Web Programming

Filename: contact.html

<html>
<head>
<title> Contact Details </title>
<body>
<h3 style="color:blue"> contact details </h3>
<p> contact no: 8787673768<br>
address: kr puram<br>

</body>
</html>

Filename: services.html

<html>
<head>
<title> services </title>
</head>
<body>
<h1> SERVICES PROVIDED </h1>
<ul>
<li> Professional Customer Service</li>
<li> High-Quality Refurbishes Laptops</li>
<li> Laptop Repair Services</li>
<li> Laptop Spare Parts </li>
<li> Chip level Repairing </li>
<ul>
</body>
</html>

S.E.A College of Engineering & Technology Page 9


Dept. of Artificial Intelligence & Machine Learning Web Programming

OUTPUT SCREEN 1:

OUTPUT SCREEN 2: OUTPUT SCREEN 3:

OUTPUT SCREEN 4:

S.E.A College of Engineering & Technology Page 10


Dept. of Artificial Intelligence & Machine Learning Web Programming

5. Write an HTML code to create a login form. On submitting the form, the user should
get navigated to a profile page.

Filename : pg5.html

<html>
<head>
<title> Login Page </title>
<style>
Body
{
font-family: Calibri, Helvetica, sans-serif;
}
button
{
background-color: blue;
width: 10%;
color: orange;
<!padding: 5px; >
<!margin: 100px 10px; >

}
input[type=text], input[type=password]
{
width: 90%;
margin: 10px 0;
padding: 15px 20px;
}
</style>
</head>

<body>
<center> <h1> Student Login Form </h1> </center>
<form>

<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" required>
<br>
<input type="checkbox" checked="checked"> Remember me <br>
<button type="submit"> <a href="myprofile.html"> Login</a></button>

<button type="button" > Cancel</button>


Forgot <a href="#"> password? </a>

</form>
</body>
</html>

S.E.A College of Engineering & Technology Page 11


Dept. of Artificial Intelligence & Machine Learning Web Programming

Filename : myprofile.html

<html>
<head>
<title> My profile </title>
</head>
<body>
<h1> MY PROFILE </h1>
<h3> Name : Student 1</h3>
<p> <b> Birthday: </b> ddmmyyyy </p>
<p> <b> Gender: </b> Male </p>
<p> <b> Email: </b> seacet@gmail.com </p>
<p> <b> Phone: </b> 1234567899 </p>

<a href =" pg 4.html"> BACK </a>


</body>
</html>

OUTPUT SCREEN 1:

OUTPUT SCREEN 2:

S.E.A College of Engineering & Technology Page 12


Dept. of Artificial Intelligence & Machine Learning Web Programming

6. Write an HTML code to create a frameset having header, navigation and content
sections.

Filename : p6.html

<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Filename : frame1.html

<html>
<head>
<style>
div{
background-color: white;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

Filename : frame2.html

<html>
<head>
<style>
div{
background-color: #2f4f4f;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>

S.E.A College of Engineering & Technology Page 13


Dept. of Artificial Intelligence & Machine Learning Web Programming

</html>
Filename : frame3.html

<html>
<head>
<style>
div{
background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>

OUTPUT :

S.E.A College of Engineering & Technology Page 14


Dept. of Artificial Intelligence & Machine Learning Web Programming

7. Write an HTML code to demonstrate the usage of inline CSS.

<html>
<head>
<title>Inline CSS</title>
</head>
<body style="background-color: bisque">
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

<p style="background:yellow" >HTML is used to structure a web page and its content.</p>
</body>
</html>

OUTPUT:

S.E.A College of Engineering & Technology Page 15


Dept. of Artificial Intelligence & Machine Learning Web Programming

8. Write a Java script to prompt for users name and display it on the screen.

<html>
<head>
<script>
function myFunction()
{
let person = prompt("Please enter your name", "Harry Potter");
if (person != null)
{
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</head>
<body>

<h1>The Window Object</h1>


<h2>The prompt() Method</h2>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>

OUTPUT SCREEN 1:

S.E.A College of Engineering & Technology Page 16


Dept. of Artificial Intelligence & Machine Learning Web Programming

OUTPUT SCREEN 2:

OUTPUT SCREEN 3:

S.E.A College of Engineering & Technology Page 17


Dept. of Artificial Intelligence & Machine Learning Web Programming

9. Design HTML form for keeping student record and validate it using Java script

<html>
<head>
<title>Student Record Form</title>
</head>
<body>
<h1>Student Record Form</h1>
<form id="studentForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<br>

<label for="rollNumber">Roll Number:</label>


<input type="number" id="rollNumber" required>
<br>

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

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

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

<script>
document.getElementById("studentForm").addEventListener("submit", function(event)
{
event.preventDefault();

// Get input values


const name = document.getElementById("name").value;
const rollNumber = document.getElementById("rollNumber").value;
const age = document.getElementById("age").value;
const email = document.getElementById("email").value;

// Basic validation
if (name.trim() === "" || rollNumber.trim() === "" || age.trim() === "" || email.trim()
=== "") {
alert("All fields are required!");
return;
}

// You can perform additional validation here if needed

// Display the student record (you can do other operations with the data here)
alert(`Student Record:

S.E.A College of Engineering & Technology Page 18


Dept. of Artificial Intelligence & Machine Learning Web Programming

Name: ${name}
Roll Number: ${rollNumber}
Age: ${age}
Email: ${email}`);

// Reset the form after submission


document.getElementById("studentForm").reset();
});
</script>
</body>
</html>

OUTPUT SCREEN 1:

OUTPUT SCREEN 2:

S.E.A College of Engineering & Technology Page 19


Dept. of Artificial Intelligence & Machine Learning Web Programming

OUTPUT SCREEN 2:

S.E.A College of Engineering & Technology Page 20


Dept. of Artificial Intelligence & Machine Learning Web Programming

10. Write a HTML code to list array elements using Java Script.

<html>
<body>
<center>
<h1>S.E.A College of Engineering</h1>
</center>
<ul id="myList"></ul>
<script>
let data = ["Ram", "Shyam", "Sita", "Gita"];
let list = document.getElementById("myList");
for (i = 0; i < data.length; ++i) {
let li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html>

S.E.A College of Engineering & Technology Page 21

You might also like