WebDesignandDevelopment
Experiment-1
Aim:Create a linkwith the name of Mallareddy University and linkthat name to
theuniversity website and Insert an image and create a link such that clicking
on image takesusertoanotherpage.
Program code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial ">
<title>Mallareddy University </title>
</head>
<body bgcolor="pink">
<center>
<p style = "color:blue ; font-size:42px;"><strong>Malla Reddy University</strong></p>
<h1><a href="https://www.mallareddyuniversity.ac.in" target="_blank">MallaReddy
University</a></h1>
<p style = "color:teal ; font-size:38px ; margin: 32px ; text-align: center;
font-weight:bold;"> Welcome to AIML Department</p>
<p style="text-align:center ; font-size:28px; font-style:italic;">AI/MLshort for artificial intelligence
(AI) and machine learning (ML)</p>
<p style="text-align:center ; font-size:28px; font-family:lucida calligraphy;">Represents an important
evolution in computer science and data processing that is quickly transforming a vast array of
industries.</p<br><br>
<a href="https://www.mallareddyuniversity.ac.in/soe/aiml/department-home" target="_blank">
<img style="text-align:center" src="D:/RATHEESH/webdesign/images/download.jpg" alt="AIML"
width="250" height="250"></a>
</center>
</body>
</html>
Output:
ExerciseProgram:
Create a basic webpage using html tags to display links of Home Page, About us,
Services, Contact with images respectively.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Web Page</title>
</head>
<body style="font-family: Arial, sans-serif;margin: 0;padding: 5px;">
<header style="background-color: #333;color: white; text-align: center;padding: 5px;">
<h1 style="font-size:50px"><imgsrc="D:\RATHEESH\webdesign\images\bs-logo.JPG" alt="Logo"
width="100" height="70" align="left">Welcome to Our Website</h1>
</header>
<nav style="text-align: center;margin-top: 20px;">
<a href="https://www.mallareddyuniversity.ac.in/" target="_blank">Home</a>
<a href="https://www.mallareddyuniversity.ac.in/university" target="_blank">About
Us</a>
<a href="https://www.mallareddyuniversity.ac.in/contact-us" target="_blank">Contact</a>
</nav>
<main style="margin: 30px;">
<imgsrc="D:\RATHEESH\webdesign\images\home.JPG" alt="About us" width="100"
height="100"><h2>Home Page</h2><p>Welcome to home page of our website</p>
<imgsrc="D:\RATHEESH\webdesign\images\aboutus.JPG" alt="About us" width="100"
height="100"><h2>About Us</h2><p>We are a dedicated team providing various services.</p>
<imgsrc="D:\RATHEESH\webdesign\images\contactus.JPG" alt="Contact" width="100"
height="100"><h2>Contact Us</h2><p>Email:
[email protected]</p>
</main>
<footer style="background-color: #333;color: white; text-align: center;padding: 5px;">
<p>© 2024 Our Website. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Experiment–2
Aim:DesignyourCVwiththefollowingco
ntents
Personaldetails
Workexperience
Educationaldetails
Skills
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Curriculum Vitae</title>
<style>
html, body {
overflow: hidden;
</style>
</head>
<body bgcolor="gray";>
<center>
<h1 style="text-align:center ; font-size:28px; font-style:italic;">My Curriculum Vitae</h1>
<table border="1">
<tr>
<td>
<h2 style="text-align: center; font-style:italic;">Personal Information</h2>
<p style = "font-size:20px; text-align: center;"><strong>Name:</strong>RATHEESH</p>
<p style = "font-size:20px; text-align:
center;"><strong>Email:</strong>
[email protected]</p>
<p style = "font-size:20px; text-align: center;"><strong>Phone: </strong>9629210618</p>
<p style = "font-size:20px; text-align: center;"><strong>Address:</strong>Suraram</p>
</td>
</tr>
<tr>
<td>
<h2 style="text-align: center; font-style:italic;">Education</h2>
<p style = "font-size:20px; text-align: center;"><strong>Degree:</strong> B.E</p>
<p style = "font-size:20px; text-align: center;"><strong>Major:</strong> Computer Science</p>
<p style = "font-size:20px; text-align: center;"><strong>University:</strong> Anna University</p>
<p style = "font-size:20px; text-align: center;"><strong>Year of Graduation:</strong> 2012</p>
</td>
</tr>
<tr>
<td colspan="2">
<h2 style="text-align: center; font-style:italic;">Work Experience</h2>
<p style = "font-size:20px; text-align: center;"><strong>Company:</strong>Nikitha Web Design And
Developement</p>
<p style = "font-size:20px; text-align: center;"><strong>Position:</strong> Software Engineer</p>
<p style = "font-size:20px; text-align: center;"><strong>Duration:</strong> May 2012 - Sep
2014</p>
</td>
</tr>
<tr>
<td colspan="2">
<h2 style="text-align: center; font-style:italic;">Skills</h2>
<ul style="font-style:italic;">
<li style="list-style-type: square;">HTML/CSS</li>
<li style="list-style-type: square;">JavaScript</li>
<li style="list-style-type: square;">PHP</li>
<li style="list-style-type: square;">Web Development</li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>
Output:
ExerciseProgram:
Createa webpagefordemonstrationofCSSbyapplying
Inlinestyle
Internalstyle
Externalstyle
Program code:
<html>
<head>
<style type="text/css">
body
background-image:url('D:/RATHEESH/webdesign/images/aimlbc.jpg'); background-repeat: no-
repeat;background-size: cover;
a:link { text-decoration:none;color:orange; }a:visited { text-decoration:none;color:red; }a:hover
{ text-decoration:underline;color:blue; }a:active{text-
decoration:underline;color:purple;}h3{color:green;}
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet"type="text/css" href="style.css">
<title>CSS(Inline,InternalandExternal)</title>
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;">CSS(Inline,InternalandExternal)</h1>
<p>Heading is Styled by InlineCSS</p>
<p class="left">This Paragraph is Styledby External CSS using class "Left"</p>
<p class="center">This Paragraph is Styled by External CSS using class "Center"</p>
<p class="right">This Paragraph is Styled by External CSS using class "Right"</p>
<h2><b>This Below Element share Styled by InternalCSS</b></h2>
<h3 class="c1">The cursor over this element is plussign</h3>
<h3 class="c2">The cursor over this element is a pointinghand</h3>
<h3 class="c3">The cursor overthis element is a graspinghand</h3>
<h3 class="c4">The cursor over this element is aIbar</h3>
<h3 class="c5">The cursor over this element is await</h3>
<h3 class="c6">Thecursorover this element is aquestionmark</h3>
</html>
Style.css
p.left
text-align:left;color:blue;
font-family:Cambria;font-size:large;
text-indent:20px;
p.center
text-align:center;
text-decoration:underline;text-transform:uppercase;letter-spacing:-3px;
word-spacing:20px;font-size:larger;
p.right
{
text-align:right;color:red;
font-family:Tahoma;font-size:15pt;
text-decoration:overline;font-style:italic;
b#headline
color:orange;font-size:22px;font-family:arial;
text-decoration:underline;
Output:
Experiment–3
Aim:CreateaWebpagetodisplayasimplecalculatortoperformthefollowingoperations:
Sum
Product
Difference
Quotient
Program:
<html>
<head>
<title>CALCULATOR</title>
</head>
<style>
html, body {
overflow: hidden;
input {
width: 100%;
padding: 40px;
font-weight: bold;
input:hover {
background: silver;
</style>
<body bgcolor="pink">
<div align="center">
<h2>SIMPLECALCULATOR</h2>
<script type="text/javascript">
a = ['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', 'C', '0', '=', '/'];
z = '<td><input type="button" value="';
document.write('<form name="cal"><table><tr><td colspan="8"><input type="text"
name="get"></td></tr><tr>');
for (vari = 0; i< 16; i++) {
if (i == 12)
document.write('<td><input type="reset" value="C"></td>');
continue;
if (i == 14)
document.write('<td><input type="button" value="="
onclick="cal.get.value=eval(cal.get.value)"></td>');
continue;
if (i == 3 || i == 7 || i == 11|| i == 15) {
document.write(z + a[i] + '" onclick="cal.get.value+=\'' + a[i] + '\'\"></td></tr><trrowspan="2">');
continue;
else
document.write(z + a[i] + '" onclick="cal.get.value+=\'' + a[i] + '\'\"></td>');
document.write('</table></form></div>');
</script>
</div>
</body>
</html>
Output:
ExerciseProgram:
TodesignanysimplewebpageusingJavaScripttodemonstrateonframetags.
Program:
3.2.html
<html>
<head>
<title>FrameExample</title>
</head>
<frameset rows="25%,75%">
<frame src= "D:/RATHEESH/webdesign/images/coll-logo.PNG" scrolling="no"/>
<frameset cols="30%,70%">
<frame src="menu.html"name="menuFrame">
<frame src="content.html"name="contentFrame">
</frameset>
</frameset>
</html>
menu.html:
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<ul>
<li><a href="javascript:void(0);" onclick="loadContent('Soe.html')">School of
Engineering</a></li>
<li><a href="javascript:void(0);" onclick="loadContent('Soa.html')">School of
Agriculture</a></li>
<li><a href="javascript:void(0);" onclick="loadContent('Som.html')">School of
Management</a></li></ul>
<script>
functionloadContent(page){
parent.contentFrame.location.href = page;
</script>
</body>
</html>
content.html:
<!DOCTYPE html>
<html>
<head>
<title>Content</title>
</head>
<body>
<h1>Welcome to Content</h1>
<p>This is the default content area.</p>
</body>
</html>
Soe.html:
<html>
<body>
<p><strong>B.Tech:</strong></p>
<ul>
<li><p>COMPUTERSCIENCE&ENGINEERING</p></li>
<li><p>ARTIFICIALINTELLIGENCE&MACHINELEARNING</p></li>
<li><p>DATASCIENCE</p></li>
<li><p>CYBERSECURITY</p></li>
<li><p>INTERNETOFTHINGS</p></li>
<li><p>INFORMATIONTECHNOLOGY</p></li>
</ul>
<p><strong>M.Tech:</strong></p>
<ul>
<li><p>COMPUTERSCIENCE&ENGINEERING</p></li>
<li><p>CLOUDCOMPUTING</p></li>
<li><p>SOFTWAREENGINEERING</p></li>
<li><p>BIGDATAANALYTICS</p></li>
</ul>
</body>
</html>
Soa.html:
<html>
<body>
<p><strong>Bsc:</strong></p>
<ul>
<li><p>B.Sc.(Hons.)AGRICULTURE</p></li>
<li><p>B.Sc.(Hons.)HORTICULTURE</p></li>
<li><p>B.Sc.(Hons.)FORESTRY</p></li>
<li><p>B.Sc.(Hons.)FOODSCIENCE&TECHNOLOGY</p></li>
</ul>
<p><strong>M.Sc.Agriculture:</strong></p>
<ul>
<li><p>GENETICS&PLANTBREEDING</p></li>
<li><p>AGRONOMY</p></li>
<li><p>ENTOMOLOGY</p></li>
<li><p>PLANTPATHOLOGY</p></li>
</ul>
</body>
</html>
Som.html:
<html>
<body>
<p><strong>BBAPROGRAMMES:</strong></p>
<ul>
<li><p>BBA-DualSpecialization(Buss.Analytics,Fin.,Mrkg.,&HRM)</p></li>
<li><p>BBA-LogisticsManagement</p></li>
<li><p>BBA-BusinessAnalytics</p></li>
<li><p>BBA-BankingandFinance</p></li>
</ul>
<p><strong>MBAPROGRAMMES:</strong></p>
<ul>
<li><p>MBA-DualSpecialization(Fin.,HRM,IT,&Mrkg.)</p></li>
<li><p>MBA-Agri.BusinessManagement</p></li>
<li><p>MBA-BusinessAnalytics</p></li>
<li><p>MBA-Logistics&SupplyChainManagement</p></li>
</ul>
</body>
</html>
Output:
Experiment-4
Aim:
Createawebpagetoacceptindividualmarksfromtheuserandcomputethegradeofth
estudent.
Program:
4.1.html
<html>
<head>
<title>Grade Calculator</title>
<style>
body
font-family: Arial, sans-serif;
label
display: block; margin-bottom: 5px;
input
width: 100px;
margin-bottom: 10px;
button
{
padding: 10px 20px; background-color: #4CAF50; color: white;
border: none; cursor: pointer;
#result {
font-weight: bold; margin-top: 20px;
</style>
</head>
<body>
<h2>Grade Calculator</h2>
<form id="marksForm">
<label for="subject1">Subject 1:
<input type="number" id="subject1" min="0" max="100" step="1"></label><br>
<label for="subject2">Subject 2:
<input type="number" id="subject2" min="0" max="100" step="1"></label><br>
<label for="subject3">Subject 3:
<input type="number" id="subject3" min="0" max="100" step="1"></label><br>
<label for="subject4">Subject 4:
<input type="number" id="subject4" min="0" max="100" step="1"></label><br>
<label for="subject5">Subject 5:
<input type="number" id="subject5" min="0" max="100" step="1"></label><br>
<label for="subject6">Subject 6:
<input type="number" id="subject6" min="0" max="100" step="1"></label><br>
<button type="button" onclick="calculateGrade()">Calculate Grade</button>
</form>
<div id="result">
</div>
<script>
functioncalculateGrade() {
const marks1 = parseFloat(document.getElementById("subject1").value);
const marks2 = parseFloat(document.getElementById("subject2").value);
const marks3 = parseFloat(document.getElementById("subject3").value);
const marks4 = parseFloat(document.getElementById("subject4").value);
const marks5 = parseFloat(document.getElementById("subject5").value);
const marks6 = parseFloat(document.getElementById("subject6").value);
consttotalMarks = marks1 + marks2 + marks3 + marks4 + marks5 + marks6;
constaverageMarks = totalMarks / 6;
let grade;
if (averageMarks>= 90) { grade = "A";
} else if (averageMarks>= 80) { grade = "B";
} else if (averageMarks>= 70) { grade = "C";
} else if (averageMarks>= 60) { grade = "D";
} else { grade = "F";
document.getElementById("result").textContent = `Your Grade: ${grade}`;
</script>
</body>
</html>
Output:
ExerciseProgram:
Createawebpagetodisplaytimetable.
Program:
4.2.html
<html>
<head>
<title>Class Time Table</title>
</head>
<body text="black" bgcolor="pink">
<h1><center>MALLA REDDY UNIVERSITY</h1>
<h2><center>Computer Science & Engineering (AL&ML)</h2>
<h3><center>Class Time Table</h3>
<center>
<p><table border="10" bordercolor="black" bgcolor="cyan" height="60%" width="70%">
<tr align="center">
<th>DAY/TIME</th>
<th>09:10AM <br>10:10AM</th>
<th>10:10AM <br>11:10AM</th>
<th>11:10AM <br>11:20AM</th>
<th>10:20AM <br>12:20PM</th>
<th>12:20PM <br>01:20PM</th>
<th>01:20PM <br>02:20PM</th>
<th>02:20PM <br>03:20PM</th>
</tr>
<tr align="center">
<td>MON</td>
<td>WWD</td>
<td>AD</td>
<td rowspan="2">BREAK</td>
<td>AD</td>
<td rowspan="6"><br>L<br>U<br>N<br>C<br>H<br></td>
<td colspan="2">AI LAB</td>
</tr>
<tr align="center">
<td>TUE</td>
<td colspan="2">DA LAB</td>
<td>OOSE</td>
<td>AI</td>
<td>DBMS</td>
</tr>
<tr align="center">
<td>WED</td>
<td>OOSE</td>
<td>AD</td>
<td colspan="2">WDD LAB</td>
<td>AI</td>
<td>LIBRARY</td>
</tr>
<tr align="center">
<td>THUR</td>
<td>DA</td>
<td>PWS</td>
<td rowspan="3">BREAK</td>
<td>AD</td>
<td colspan="2">DBMS LAB</td>
</tr>
<tr align="center">
<td>FRI</td>
<td>WDD</td>
<td>AD</td>
<td>DBMS</td>
<td>OOSE</td>
<td>DBMS</td>
</tr>
<tr align="center">
<td>SAT</td>
<td>PWS</td>
<td>DBMS</td>
<td>DA</td>
<td>AI</td>
<td>SPORTS</td>
</tr>
</table></p>
</body>
</html>
Output:
Experiment-5
Aim:JavaScript to validate the following field sof the above registration form
First name(name should contains the minimum 6 alphabets)
password(length should not be less than 6characters)
email(should no tcontain invalid and must follow the standard
pattern)
mobile number(should contain 10 digits only)
address(should not be empty)
submit and reset buttons
Program:
