web programs
web programs
1. Design web pages for your college containing a description of the courses, departments, faculties, library etc, use href, list tags.
output
code:
<html>
<head>
<style>
.clgname{font-size: xx-large;}
.contents{
display: flex;
flex-flow: wrap;
justify-content: center;
}
.courses,.faculties,.library{
width: 50%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
}
.courses{background-color: violet;}
.faculties{background-color: orange;}
.library{background-color: aquamarine;}
</style>
</head>
<body>
<CENTER>
<DIV class="clgname">
ADITYA DEGREE COLLEGE
</DIV>
</CENTER>
<div class="contents">
<div class="courses">
<ol>
<li>MCSAIR</li>
<li>DsSTCS</li>
<li>MPCS</li>
<LI>MECS</LI>
<LI>MSTCS</LI>
</ol>
</div>
<DIV class="faculties">
<OL>
<LI>A.RAJA</LI>
<LI>JANARDHAN</LI>
<LI>KALYAN RAJ</LI>
<LI>MALLIKARJUN</LI>
</OL>
</DIV>
<DIV class="library">
<P>LIBRARY consists of more than 10000 books , daily newspapers,computers </P>
</DIV>
</div>
</body>
</html>
2. Create your class timetable using table tag.
output:
code:
<html>
<head>
</head>
<body>
<table border cellpadding="5px" cellspacing="0">
<tr>
<td>periods--></td>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
<td>5th</td>
<td>6th</td>
<td>7th</td>
<td>8th</td>
</tr>
<tr>
<td>monday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>tuesday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>wednesday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>thursday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr>
</table>
</body>
</html>
3.Create a feedback form for your curriculum. Use textbox, text area, checkbox, radio button etc
output
code:
<html>
<head>
<style>
</style>
</head>
<body>
<form>
name: <input type="text" required><br>
rollnumber: <input type="text" required><br>
a.raja - computer <br>
<input type="radio" name="ar"> bad <br>
<input type="radio" name="ar"> good <br>
<input type="radio" name="ar"> excellent <br>
janardhan - maths <br>
<input type="radio" name="jn"> bad <br>
<input type="radio" name="jn"> good <br>
<input type="radio" name="jn"> excellent <br>
kalyan raj - web tech <br>
<input type="radio" name="kr"> bad <br>
<input type="radio" name="kr"> good <br>
<input type="radio" name="kr"> excellent <br>
<textarea cols="30" rows="10">any comments on management...please type here</textarea>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
4.create a web page using frame. Divide the page into two parts with Navigation links on left hand side of page (width=20%) and content page on right hand side of page (width = 80%). On clicking the navigation Links corresponding content must be shown on the right hand side.
code:
code:
main.html
<html>
<head>
</head>
<body>
<iframe src="links.html" name="left" width="19%"></iframe>
<iframe src="display.html" name="right" width="79%"></iframe>
</body>
</html>
links.html
<html >
<head>
</head>
<body>
<div>
<div><a href="javascript:parent.right.document.getElementsByTagName('html')[0].style.background='blue'">
blue</a></div>
<div><a href="javascript:parent.right.document.getElementsByTagName('html')[0].style.background='red'">
red</a></div>
<div><a href="javascript:parent.right.document.getElementsByTagName('html')[0].style.background='green'">
green</a></div>
<div><a href="javascript:parent.right.document.getElementsByTagName('html')[0].style.background='violet'">
violet</a></div>
</div>
</body>
</html>
display.html
<html>
<head>
</head>
<body>
<div>
hi! this is right div
</div>
</body>
</html>
5. Write html code to develop a webpage having two frames that divide the webpage into two equal rows and then divide the row into equal columns fill each frame with a different background colour.
output:
code:
<html>
<head>
<style>
body{margin:0}
.top,.bottom{display: flex;}
iframe{width: 50%;height: 49.5vh;border :0.25vh solid black ;}
</style>
</head>
<body>
<div class="main">
<div class="top">
<iframe style="background-color: orange;"></iframe>
<iframe style="background-color: red;"></iframe>
</div>
<div class="bottom">
<iframe style="background-color: green;"></iframe>
<iframe style="background-color: violet;"></iframe>
</div>
</div>
</body>
</html>
6. Create your resume using HTML tags. Experiment with colours, text, link, size and also other tags you studied.
output
code:
<html>
<head>
</head>
<body>
<center><h1 style="color:tomato;">RESUME</h1></center>
<div class="general">
<p>name: ahmad</p>
<p>age: 25</p>
<p>contact: 9335482908</p>
<p>address: gachiplate,hyderagood</p>
</div>
<h4 style="color:DodgerBlue;">EDUCATION</h4>
<div class="education">
<p>highschool in kalutanya</p>
<p>inter in devayana</p>
<p>B.Tech mechanical in naatya</p>
</div>
<h4 style="color:DodgerBlue;">WORK EXPERIENCE</h4>
<div class="we">
<p>1years as bike mechanic </p>
<p>2years as car mechanic</p>
<p>1year in cycle shop</p>
</div>
<h4 style="color:DodgerBlue;">HOBBIES</h4>
<div class="hobbies">
<p>reading books</p>
<p>watching news</p>
</div>
</body>
</html>
7. Design a web page of your College Day Celebrations with an attractive background colour, text colour, images, font etc. Use CSS.
output
code:
<html>
<head>
<style>
.name{
font-family: 'Lucida Sans ';
height: 150px;
position: relative;
background-color: orangered;
}
.adc{
position: absolute;
bottom: 10px;left: 10px;
}
.date{
font-family: Arial;
margin-top: 10px;
padding: 15px;
background-color: violet;
}
.details{
margin-top: 10px;
padding: 15px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="name">
<font size="20px" class="adc">ANNUAL DAY CELEBRATIONS</font>
</div>
<div class="date">
<font>SATURDAY,28th MAY</font><br>
<font>5-9PM</font>
</div>
<div class="details">
<font>COME N NJOY</font>
<ul>
<li>music</li>
<li>dance</li>
<li>games</li>
<li>prizes</li>
<li>food</li>
</ul>
</div>
</body>
</html>
</html>
8. Use Inline CSS to format your resume that you created.
output:
code:
<html>
<head>
</head>
<body>
<center><h1 style="color:tomato;">RESUME</h1></center>
<div class="general">
<p>name: ahmad</p>
<p>age: 25</p>
<p>contact: 9335482908</p>
<p>address: gachiplate,hyderagood</p>
</div>
<h4 style="color:DodgerBlue;">EDUCATION</h4>
<div class="education">
<p>highschool in kalutanya</p>
<p>inter in devayana</p>
<p>B.Tech mechanical in naatya</p>
</div>
<h4 style="color:DodgerBlue;">WORK EXPERIENCE</h4>
<div class="we">
<p>1years as bike mechanic </p>
<p>2years as car mechanic</p>
<p>1year in cycle shop</p>
</div>
<h4 style="color:DodgerBlue;">HOBBIES</h4>
<div class="hobbies">
<p>reading books</p>
<p>watching news</p>
</div>
</body>
</html>
9. Use External CSS to format your class timetable as you created.
output
code:
<html>
<head>
<link rel="stylesheet" href="timetablestyles.css">
</head>
<body>
<table border cellpadding="5px" cellspacing="0">
<tr>
<td>periods--></td>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
<td>5th</td>
<td>6th</td>
<td>7th</td>
<td>8th</td>
</tr>
<tr>
<td>monday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>tuesday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>wednesday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr><tr>
<td>thursday</td>
<td>cs</td>
<td>maths</td>
<td>web</td>
<td>E.D</td>
<td>E.A</td>
<td>telugu</td>
<td>english</td>
<td>T.S</td>
</tr>
</table>
</body>
</html>
timetablestyles.css file code:
tr:nth-of-type(odd){
background-color: violet;
}
tr:nth-of-type(even){
background-color: greenyellow;
}
td:first-child,tr:first-child{
background-color: orange;
}
10. Use External, Internal, and Inline CSS to format web page of your start up.
output
code:
main.html
<html>
<head>
<style>
li{
list-style: square;
}
</style>
<link rel="stylesheet" href="startup.css">
</head>
<body>
<center style="color:green;" class="cd">CATERING SERVICE</center>
<center style="color:lightgreen;" >BEST SERVICE IN KKD</center>
<div class="services">
<UL>
<li>BIRTHDAY PARTIES</li>
<LI>ANNIVERSARIES</LI>
<LI>WEDDING</LI>
<LI>SPECIAL OCCASIONS</LI>
</UL>
</div>
<div class="images">
<img src="" alt="image1">
<img src="" alt="image2">
<img src="" alt="image3">
</div>
<CENTER>
FOR MORE INFO: 9844357204
</CENTER>
</body>
</html>
startup.css
.services{
background-color: lightskyblue;
margin: 10px 0;
padding: 10px;
}
center{
font-size: larger;
}
.cd{
font-size: 40px;
}
11. Develop a JavaScript to display your admission details in the college.
output:
code:
<html >
<head>
</head>
<body>
student id: <input type="text" id="sid">
<button id="check">check</button>
<div class="name">name:</div>
<div class="rno">rno:</div>
<div class="course">course:</div>
<div class="fees">fees:</div>
<script>
document.getElementById("check").addEventListener('click',function stu(){
var id = document.getElementById("sid").value;
var name = document.getElementsByClassName("name")[0]
name.innerHTML = "name:"
var rno = document.getElementsByClassName("rno")[0]
rno.innerHTML="rno:"
var course = document.getElementsByClassName("course")[0]
course.innerHTML="course:"
var fees = document.getElementsByClassName("fees")[0]
fees.innerHTML="fees:"
switch(id){
case "1":name.innerHTML += "vinay" ;rno.innerHTML+="20";
course.innerHTML+="mcsair";fees.innerHTML+="50k";break;
case "2":name.innerHTML += "anjali";rno.innerHTML+="13";
course.innerHTML+="mcsair";fees.innerHTML+="50k";break;
case "3":name.innerHTML += "sneha";rno.innerHTML+="15";
course.innerHTML+="mpcs";fees.innerHTML+="30k";break;
case "4":name.innerHTML += "ashok";rno.innerHTML+="19";
course.innerHTML+="mecs";fees.innerHTML+="30k";break;
case "5":name.innerHTML += "vandhana";rno.innerHTML+="25";
course.innerHTML+="dsstcs";fees.innerHTML+="50k";break;
case "6":name.innerHTML += "radha";rno.innerHTML+="04";
course.innerHTML+="mcsair";fees.innerHTML+="50k";break;
default:name.innerHTML="enter student id between 1 to 6";break;
}
});
</script>
</body>
</html>
12. Develop simple calculator for addition, subtraction, multiplication and division operation using JavaScript.
output:
code:
<html>
<head>
</head>
<body>
<input id="hello" >
<button onclick="cal()" >calculate</button>
<script>
function cal(){
let ans = document.getElementById("hello").value
window.alert(eval(ans))
if (eval(ans) == NaN) {
window.alert("please enter only numbers")
}else{
window.alert(eval(ans))
}
}
</script>
</body>
</html>
Comments
Post a Comment