Scribd
Upload
15 views

Web Design and Development

Uploaded by

chinnikng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

Web Design and Development

Uploaded by

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

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>&nbsp;&nbsp;

<a href="https://www.mallareddyuniversity.ac.in/university" target="_blank">About


Us</a>&nbsp;&nbsp;

<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>&copy; 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&amp;ENGINEERING</p></li>

<li><p>ARTIFICIALINTELLIGENCE&amp;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&amp;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:

You might also like