College Website Record

EX 3: College Website using HTML.
DATE: 09/09/2020
AIM: To create the college website using HTML.
ALGORITHM:
Step1: Different HTML file (index, contact, courses and information) is created for the
navigation.
Step2: In index hoover for titles are generated.
Step3: Slide show for index’s picture are created.
Step4: In contact page google map is embedded for the location of college.
Step5: In login page dummy id and password is given to show how login work.
Step6: End
CODE:
Website(Course)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kathmandu University</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="College, Kathmandu, Kathmandu University, Dhulikhel,
college in Kathmandu, nepalIT">
<meta name="author" content="Gaurab Mudbhari">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="javascript/js.js="></script>
</head>
<body class="body">
<header class="mainheader">
<img src="images/logo.png">
<content id="search">
<form>
<input type="text" name="search" placeholder="Search anything..."
onclick="window.location.href='search.html'">
</form>
</content>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="course.html">Course</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
<h1>Semester 1/2</h1>
<div class="gallery">
<a target="_blank" href="images/Course/a.jpg">
<img src="images/Course/a.jpg" alt="CCT101" width="300" height="200">
</a>
<div class="desc">Introduction to information Technology</div>
</div>
<a target="_blank" href="images/Course/b.jpg">
<img src="images/Course/b.jpg"" alt="Html" width="300" height="200">
</a>
<div class="desc">Basic Introduction to HTML, CSS and Javascript</div>
</div>
<a target="_blank" href="images/Course/c.jpg">
<img src="images/Course/c.jpg"" alt="Database" width="300" height="200">
</a>
<div class="desc">Database Management System</div>
</div>
<a target="_blank" href="images/Course/d.jpg">
<img src="images/Course/d.jpg"" alt="Database" width="300" height="200">
</a>
<div class="desc">Mathematics for Computer Science</div>
</div>
<div id="fix"></div>
<hr>
<h1>Semister 3/4</h1>
</a>
</div>
</a>
</div>
</a>
</div>
</a>
</div>
<hr>
<h1>Semister 5/6</h1>
</a>
</div>
</a>
</div>
</a>
</div>
</a>
</div>
<hr>
INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Informatics College</title>
</head>
<body class="body">
<form>
</form>
</content>
<nav>
<ul>
</ul>
</nav>
</header>
<br>
<div class="slideshow-container">
<div class="iambrpslides fade">
<div class="numbertext">01 / 03</div>
<img src="./images/a.jpg">
</div>
<img src="./images/b.jpg">
</div>
<img src="./images/c.jpg">
</div>
</div>
<div style="text-align:center">
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("iambrpslides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2500); // This is for Changing image every 2.5 seconds
}
</script>
<br>
<script type="text/javascript">
document.title="Home";
</script>
<script src="scripts/slider.js"></script>
<div class="mainContent">
<div class="Content">
<article class="topContent">
<header>
<h3><a href="#" title="My First Post">Intro </a> </h3>
</header>
<footer>
<p class="post-info">This post is written by Gaurab Mudbhari</p>
</footer>
<content>
<p>Kathmandu University (KU) is an autonomous, not-for-profit, self-funding public
institution established by an Act of Parliament in December 1991. It is an institution of higher
learning dedicated to maintaining the standard of academic excellence in various classical and
professional disciplines.
</p>
</content>
</article>
<article class="bottomContent">
<header>
<h3><a href="#" title="Pathway Programme">Pathway Programme</a> </h3>
</header>
<footer>
<p class="post-info">This post is written by Gaurab Mudbhari</p>
</footer>
<content>
<p>We plan for quality higher education programmes with complete progression pathway for
you – from Foundation program up to Postgraduate degree level by the universities in
Australia and United Kingdom.
Our distinguished Academic and Examination Board also sets the academic and examination
standards of Informatics Academy’s programmes.
We make learning exclusive for you.
We know everyone has different learning needs and lifestyles. We have learning modes
ranging from traditional classroom learning, to e-learning and a combination of both to
accommodate to different learning patterns.
Our holistic education programme places equal emphasis on both academic and non-
academic, co-curricular activities. We strive to provide learning and support services, as well
as a conducive environment for you to learn, live and develop into global thought leaders of
tomorrow.
We focus in giving you the best.
</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h3>Join us today!</h3>
<p>Embark on an exciting learning journey with Informatics</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h3>Your Boardroom Qualification</h3>
<p>A Degree to stand out from the crowd…...</p>
</article>
</aside>
<aside class="buttom-sidebar">
<article>
<h3>Be ahead of your peers</h3>
<p>Fast track your education with Informatics</p>
</article>
</aside>
CONTACT:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kathmandu University</title>
<script src="javascript/js.js"></script>
<script src="javascript/validatename.js"></script>
</head>
<body class="body">
<form>
</form>
</content>
<nav>
<ul>
</ul>
</nav>
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3535.1602564909977!2d85.5364530145723!3d27.61955293595271!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb092082d99e3b%3A0xe509dafa47685dba!
2sKathmandu%20University!5e0!3m2!1sen!2snp!4v1599733099987!5m2!1sen!2snp"
width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-
hidden="false" tabindex="0"></iframe>
<h3>Contact</h3>
<h4>Kathmandu University<br>
Dhulikhel, Kathmandu, Nepal</h4>
<pre>
Phone : +977 61 538115<br>
Email : [email protected]<br>
Facebook : http://facebook.com/ku<br>
</pre>
<!DOCTYPE html>
<html>
<body>
<br>
<br>
<strong>If you are student please enter your student number:</strong>
<center>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
</center>
<hr>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 1000) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
document.title="Contact";
</script>
</body>
</html>
LOGIN:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Informatics College</title>
<script src="javascript/login.js"></script>
</head>
<body class="body">
<form>
</form>
</content>
<nav>
<ul>
</ul>
</nav>
</header>
<div class="container">
<div class="main">
<h3>Informatics Login</h3><hr/>
<form id="form_id" method="post" name="myform">
<strong>User Name :</strong></br>
<input type="text" name="username" id="username"/></br>
<strong>Password :</strong></br>
<input type="password" name="password" id="password"/></br>
<input type="button" value="Login" id="submit" onclick="validate()"/>
</form>
<span><b class="note">Note : </b><strong>For this demo use following username and
password. <br/><b class="valid"><h4>User Name : gaurav<br/>Password :
007</b></h4></span></strong>
</div>
<div class="fugo">
<a href="images/login_photo.jpg"><img src="images/login_photo.png" /></a>
</div>
</div>
document.title="Login";
</script>
</body>
</html>
CSS:
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:#1dd123;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.fugo{
float:right;
}
body{
background-color: rgb(90, 100, 85);
color: white;
font-size: 87.5%;
/*Font Size is 14 */
font-family: Arial, "Comic Sans Ms";
line-height: 1.5;
text-align: left;
}
div.gallery {
margin: 5px;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
#fix{
clear: both;
}
div.desc {
padding: 15px;
text-align: center;
}
iframe{
float: right;
}
a{
text-decoration: none;
color: white;
}
a:link, a:visited{
color: #CF5C3F;
}
a:hover, a:active{
background-color: #CF5C3F;
color:#fff;
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img{
width: 30%;
height: auto;
margin: 2% 0;
}
.mainheader nav{
background-color: #0f153b;
height: 40px;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style-type: none;
margin: 0 auto;
}
.mainheader nav ul li {
list-style-type: none;
margin: 0 auto;
float: left;
display: inline-block;
}
.mainheader nav a:link, .mainheader nav a:visited{
color: #fff;
padding: 10px 25px;

height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainHeader nav .active a:visited
{
background-color: #cf5c3F;
text-shadow: none;
}
.mainheader nav ul li a{
border-radius: 5px;
}
.mainContent{
line-height: 25px;
border-radius: 5px;
}
.Content{
width: 70%;
float: left;
border-radius: 5px;
}
.topContent{
background-color: rgb(0,0,60);
line-height: 25px;
border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomContent{
background-color: rgb(0,0,60);
line-height: 25px;
border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar{
width: 21%;
float: left;
background-color: #540a4c;
border-radius: 5px;
padding: 2% 3%;
margin: 2% 0 2% 3%;
}
.middle-sidebar{
width: 21%;
float: left;
border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
}
.buttom-sidebar{
width: 21%;
float: left;
border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
}
.mainFooter{
width: 100%;
float: left;
border-radius: 5px;
background-color: #666;
margin-top: 6%;
margin-bottom: 2%;
}
.mainFooter p{
width: 92%
margin: 10px auto;
color: #fff;
padding: 2px;
height: 40px;
text-align: center;
}
#search{
float: right;
}
#search input[type=text] {
width: 100%;
box-sizing: border-box;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 10px 40px 12px 40px;
}
.post-info{
font-style: italic;
color: #999;
font-size: 90%;
}
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.iambrpslides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
img{
width: 100%;
height: 350px;
OUTPUT:
RESULT: Thus the program is successfully executed.

College Website Record

Uploaded by

Copyright:

Available Formats

College Website Record

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

College Website Record

Uploaded by

Copyright:

Available Formats

EX 3: College Website using HTML.

AIM: To create the college website using HTML.

padding: 10px 25px;

/* Number text (1/3 etc) */

/* On smaller screens, decrease text size */

You might also like