Webd

Lab Mnual
Web Site Design(IT-217)
EXPERIMENT 1(a)
Create Webpage with HTML describing your deptt. Use paragraph and list tags
CODE:
<!DOCTYPE html>
<html>
<head>
<title>1</title>
</head>
<body background="summer.jpg">
<font color=white>
<p><b><center><h1 style="font-family:Broadway">National Institute of Technology,
Kurukshetra (or NIT Kurukshetra)</font></h1></center></b>
<hr size=5 color=black>
<h2 style="font-family:Courier New">It is a public engineering institute located in Kurukshetra.

In December 2008, it was accredited with the status of<i> Institute of National Importance
(INI)</i>. It is one of the 30 National Institutes of Technology established and administered by
Government of India. It runs undergraduate and postgraduate in programme Engineering and
Doctor of Philosophy programme in Engineering, Sciences and Humanities.
These are the major festivals that take place at NIT Kurukshetra every year.</h2>
<ol>
<hr size=5 color=black>
<h2 color=white>
<li>Techspardha</li>
<li>Confluence </li>
<li>Talent Show</li>
<li>Citius</li>
<li>Altius</li>
<li>Utkarsh</li>
</h2>
</ol>
</p>
</body>
</html>
EXPERIMENT 1(b)
Apply various colors to suitably distinguish keywords .Also apply font styling like italics ,
underline and two other fonts to words you find appropriate . Also use header tags.
Code:
<!DOCTYPE html>
<html>
<head>
<title>2</title>
</head>
<body>
<h1 style="color:pink;"> MEHAK
<font color="yellow">MIGLANI </font></h1>
<b>BOLD </b>
<i>ITALIC</i>
<u>UNDERLINE</u>
</body>
</html>
EXPERIMENT 1(c)
Create links on word eg. Wifi and Lan and link them to Wikipedia pages
Code:
<!DOCTYPE html>
<html>
<head><title>Excercise 1</title></head>
<body>
<h2><a href="https://en.wikipedia.org/wiki/Wi-Fi" target="_self">WIFI</a></h2>
<h2><a href="https://en.wikipedia.org/wiki/Local_area_network"
target="_blank">LAN</a></h2>
</body>
</html>
EXPERIMENT 1(d)
Insert an Image and create a link such that clicking on image takes user to other page.
Code
<html>
<head>
<title>Webpage</title>
</head>
<body>
<a
href="https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=g2HaWcSxBIiN8QfA1bWgCw&gws_r
d=ssl" target="_blank">
<img src="reflection.jpg" >
</a>
</body>
</html>
EXPERIMENT 1(e)
Change background color of page .At bottom create a link to take user to the top of page.
Code:
<!DOCTYPE html>
<html>
<body>
<h2 id="top">Top</h2>
<p> SOME TEXT</p>
<a href="#top">Go to top</a>
</body>
</html>
EXPERIMENT 2(a)
Create a table to show your class time table.
CODE:
<html>
<head>
<title>
NIT KKR
</title>
<style>
div.heading {
text-align:center;
color:white;
font-family:geometry soft pro n;
}
div.list {
color:white;
font-family:geometry soft pro n;
}
#a4{
background-color:pink;
font-family:broadway;
}
#a3{
color:black;
background-color:white;
font-family:magneto;
}
#a2{
color:darkblue;
background-color:yellow;
}
#a1{
color:red;
background-color:aqua;
}
</style>
</head>
<body background="mehak.jpg" alt="mehak">
<div class="heading">
<h1 align="center" font="white">NIT KURUKSHETRA</h1>
<img src="logo.jpg" alt="logo" height="150" wilih="150" >
<h2> Time Table</h2>
<h3> IT-3 </h3>
</div>
<table bgcolor="white" border="5" align="center" cellspacing="0" cellpadding="10" >
<tr bgcolor="white">
<th id="a1">DAY/TIME</th>
<th id="a2">8:30-9:25</th>
<th id="a2">9:25-10:20</th>
<th id="a2">10:40-11:35</th>
<th id="a2">11:35-12:30</th>
<th id="a2">12:30-1:25</th>
<th id="a2">1:25-2:40</th>
<th id="a2">2:40-3:35</th>
<th id="a2">3:35-4:30</th>
</tr>
<tr>
<th id="a1">MONDAY</th>
<td id="a3" colspan="2">lab-219</td>
<td id="a4"><b> L </b> </td>
<td id="a3">lec-201</td>
</tr>
<tr>
<th id="a1">TUESDAY</th>
<td id="a4"><b> U </b> </td>
<td id="a3">tut-201</td>
</tr>
<tr>
<th id="a1">WEDNESDAY</th>
<td id="a4"><b> N </b> </td>
</tr>
<tr>
<th id="a1">THURSDAY</th>
<td id="a4"><b> C </b> </td>
</tr>
<tr>
<th id="a1">FRIDAY</th>
<td id="a4"><b> H </b> </td>
</tr>
</table>
<center> <a href="www.nitkkr.ac.in" > <b> NIT KKR website </b> </a> </center>
<div class="list">
<h4> Subject description</h4>
<ul type="diamond">
<li>201-Digital Electronics<li>
<li>203-C++<li>
<li>205-DS<li>
<li>207-Web Development<li>
<li>209-PDFS<li>
<li>211-OB<li>
</div>
</body>
</html>
OUTPUT :
EXPERIMENT 2(b)
Use tables to provide layout to your HTML page describing your university Infrastructure
Code:
<html>
<head>
<title>INFRA</title>
<style>
table,th,td{
border:1px solid grey;
border-collapse:collapse;
text-align:center;
font-size:50px;}
tr#t1{
color:orange;
font-size:40px;}
table#t01 tr:nth-child(even){
background-color:teal;}
</style>
</head>
<body>
<h1 style="font-size:100px; color:pink;text-align:center;"><u>NIT Kurukshetra</u></h1>
<h1 style="font-size:60px;color:red;text-align:center;">INFRASTRUCTURE</u></h1>
<table id="t01" width="100%">
<tr id="t1">
<td> <a href="www"><u>S.NO</u></a></td>
<td> <a href="www"><u>ITEM</u></a></td>
<td> <a href="www"><u>QUANTITY</u></a></td>
</tr>
<tr>
<td>1</td>
<td>Gates</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>Departments</td>
<td>7</td>
</tr>
<tr>
<td>3</td>
<td>Boy's Hostels</td>
<td >10</td>
</tr>
<tr>
<td>4</td>
<td>Girl's Hostels</td>
<td >4</td>
</tr>
<tr>
<td>5</td>
<td>Market</td>
<td >1</td>
</tr>
<tr>
<td>6</td>
<td>Canteen</td>
<td>3</td>
</tr>
<tr>
<td>7</td>
<td>Sports Complex</td>
<td >1</td>
</tr>
<tr>
<td>8</td>
<td>Health Center</td>
<td >1</td>
</tr>
</table>
</body>
</html>
EXPERIMENT 2(c)
Use <span> and <div> tags to provide a layout to above page instead of table layout
Code:
<html>
<head>
<title>INFRA</title>
<style>
li{
font-size:25px;
color:yellow;}
ol{
margin:15px;}
input[type]{
font-size:20px;}
button{align:center;}
</style>
</head>
<body>
<h1 style="font-size:20px;color:red;text-align:center;"><u>NIT Kurukshetra</u></h1>
<h1 style="font-size:20px;color:black;text-align:center;">INFRASTRUCTURE</u></h1>
<div style="width:1350px;height:384px;border:2px solid #555;background-color:teal;">
<ol type="a">
<li> Gates : 4</li>
<li> Departments : 7</li>
<li> <span style="color:blue">Boy's</span> Hostels : 10</li>
<li> <span style="color:pink">Girl's</span> Hostels : 4</li>
<li> Market : 1</li>
<li> Canteen : 3</li>
<li> <span style="color:purple">Sports</span> Complex : 1</li>
<li> <span style="font-family:magneto">Health</span> Center : 1</li>
</ol>
</div>
</body>
</html>
EXPERIMENT 2(d)
Use frames such that page is divided into 3 frames .
Code
<html>
<head>
<title> My Travel Diary </title>
</head>
<frameset rows="25%,*" border=0 framespacing="30">

<frame src="cover.html">
<frameset cols="25%,*" border=0 framespacing=10>
<frameset rows="50%,*">
<frame src="travel.html" scrolling="no">
<frame src="summer.jpg" scrolling="no" name="info">

</frameset>
<frame name="location">
</frameset>
</frameset>
<body>
</body>
</html>
EXPERIMENT 2(e)
Embedded Video and Audio in your Webpage.
Code:
<!DOCTYPE html>
<html>
<body>
<h5>VIDEO</h5>
<video width="1000" controls>
<source src="giphy.mp4" type="video/mp4" height="50%">
</video><br>
<h5>AUDIO</h5>
<embed src="1.mp3" controls width="1000" height="100" />
</body>
</html>
Experiment 3(a)
Question 1. Apply in -line CSS to change colors of certain text portion,bold, underline, and italic
certain keywords in your HTML webpage. Also change background color of each paragraph
using in-line CSS.
Code :
<!DOCTYPE html>
<html>
<head>
<title>CSS 1</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div>
THIS IS <span >SOME TEXT.</span>
<p id="1">
PARAGRAPH 1
</p>
<p id="2">PARAGRAPH 2</p>
</div>
</body>
</html>
EXPERIMENT 3(b)
Write all the above styling in CSS in different file (.css) and link it to your webpage such that
changes made in CSS file are immediately reflected on the page. Group paragraphs into single
class and add styling information to the class in CSS.
Code: HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS 1</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div>
THIS IS <span >SOME TEXT.</span>
<p id="p1">
PARAGRAPH 1
</p>
<p id="p2">PARAGRAPH 2</p>
</div>
</body>
</html>
Code CSS :
span{
color:pink;
font-weight:bold;
font-style:italic;
text-decoration:underline;
}
#p1{
background:teal ;
color:yellow;}
#p2{
background:black;
}
EXPERIMENT 3(c)
Create a simple form to submit user input like his name, age, address, and favorite subject, movie
and singer.
(b) : Add few form elements such as radio buttons, check boxes and password field. Add a
submit button at last.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="">
<center>
<b>Email:&nbsp &nbsp &nbsp</b>
<input type="text" placeholder="Enter Email" name="email" required size="30">
<br><br>
<b>Password:</b>
<input type="password" size="30" placeholder="Enter Password" name="psw" required>

<br><br>
<b>Name:&nbsp &nbsp &nbsp</b>
<input type="text" placeholder="Enter Name" name="name" required >
<br><br>
<b>Age:&nbsp &nbsp &nbsp</b>
<input type="text" placeholder="Enter Age" name="age" required size="5">
<br><br>
<b>Gender</b>
<input type="radio" value="Male" name="gender" >Male
<input type="radio" value="Female" name="gender" >Female
<br><br>
<b>Category:</b>
<select>
<option>Student</option>
<option>Working</option>
<option>Retired</option>
<option>Senior Citizen</option>
</select>
<br><br>
<b>Description:</b><br>
<textarea rows=10 cols=40>Enter About Yourself </textarea>
<br><br>
<input type="checkbox" checked="checked"> Agree to Terms & Conditions
<br><br>
<button type="submit" class="submit" size="100"><b>Submit</b></button>
</center>
</form>
</body>
</html>
Experiment 4(a)
Form validation using JavaScript
Code:
<html>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if(name==null || name=="")
{
alert("Please enter name");
return false;
}
else if(password.length<5)
{
alert("Password must be greater than 4 characters");
return false;
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br>
<input type="submit" value="register">
</form>
</body>
</html>
EXPERIMENT 4(b)
Write a program to display information box as soon as the page loads.
Code:
<html>
<head>
<title>javascript</title>
<script type="text/javascript"></script>
</head>
<body onload="alert('WELCOME')">
</body>
</html>
EXPERIMENT 4(c)
Ques 3. Write a javascript program to change background color after 5 seconds of page load.
Code:
<html>
<head>
<script type="text/javascript">
var count=0;
function time()
{
setTimeout("fun1()",5000);
}
function fun1()
{
var a=new
Array("red","green");
if(count<2)
{
document.bgColor=a[count++];
setTimeout("fun1()",5000);
}
else
count=0;
as();
}
</script>
</head>
<body bgcolor=yellow onload="time()">
</body>
</html>
EXPERIMENT 4(d)
Write a javascript program to dynamically bold, italic and underline words and phrases based on
user actions.
Code :
<html>
<head>
<style>
button{
font-size:150%;
}
</style>
function bold(){
document.getElementById("ok").style.fontWeight="bold";
}
function italic(){
document.getElementById("ok").style.fontStyle="italic";
}
function underline(){
document.getElementById("ok").style.textDecoration=" underline";
}
</script>
</head>
<body>
<h1 id="ok">Javascript</center</h1><br>
<button id="1" onclick="bold()" >BOLD</button><br>
<button id="2" onclick="italic()">ITALIC</button><br>
<button id="3" onclick="underline()">UNDERLINE</button><br>
</body>
</html>
EXPERIMENT 4(e)
Write a Javascript program to display a hidden div (e.g. showing stats of a player when user
clicks on his name).
Code :
<html>
<head>
function fun(){
document.getElementById("ok").style.display="block";}
</script>
</head>
<body>
<h1><center><u>SHOW</u></center></h1>
<H3> Click to show image </h3>
<button onclick="fun()">Taylor Swift</button><br><br>

<div hidden id="ok"> <img src="ts.jpg"> </div>
<br><br>
</body>
</html>

Webd

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Webd

Загружено:

Авторское право:

Доступные форматы

Lab Mnual

Web Site Design(IT-217)

<h2 style="font-family:Courier New">It is a public engineering institute located in Kurukshetra.

<frameset rows="25%,*" border=0 framespacing="30">

<frame src="summer.jpg" scrolling="no" name="info">

<input type="password" size="30" placeholder="Enter Password" name="psw" required>

<input type="checkbox" checked="checked"> Agree to Terms & Conditions

<button onclick="fun()">Taylor Swift</button><br><br>

Вам также может понравиться