Web Technology Lab

WEB TECHNOLOGY LAB
MANAV MIDDHA
2K14/SE/043
PRACTICAL 1
Create a web page to describe your department. Use paragraph and list tags.
<html>
<head>
<title>Practical 1</title>
</head>
<body>
<h1 align="center" >Department of Computer Science and Engineering</h1>
<p>The department consists of the following branches</p>
<ol>
<li>Computer Engineering</li>
<li>Software Engineering</li>
<li>Information Technology</li>
</ol>
<p>The department gives admission to over 300 undergraduate students every year.</p>
</body>
</html>
PRACTICAL 2
Apply various font styles,colours,bold,italic.
<html>
<head>
</head>
<body>
<h1 align="center" >Department of Computer Science and Engineering</h1>
<p><font style="latin">The department consists of the following branches</font></p>
<ol>
<li><b><font color="blue">Computer Engineering</font></b></li>
<li><b><font color="green">Software Engineering</font></b></li>
<li><b>Information Technology</b></li>
</ol>
<p>The department gives admission to over <i>300 undergraduate students</i> every year.</p>
</body>
</html>
PRACTICAL 3
To insert an image clicking on which goes to another page.
Insert a link to go to the top of the page.
<html>
<head>
</head>
<body bgcolor="grey">
<a href="https://www.google.co.in/search?
q=bulb&oq=bulb&aqs=chrome..69i57j0l5.2302j0j7&sourceid=chrome&ie=UTF8"><img src="https://encrypted-tbn3.gstatic.com/images?
q=tbn:ANd9GcQvQp4BUxlynyHxIXpSpgTxbsPU-jW-d5pUxVna5Urp0MEY186u"
height=300 width="300" align="center"></a>
<h1>WT LAB</h1>
<h1>WT LAB</h1>
<h1>WT LAB</h1>
<h1>WT LAB</h1>
<h1>WT LAB</h1>
<h1>WT LAB</h1>
<a href="#">Go To Top</a>
</body>
</html>
PRACTICAL 4
Design a single web page giving description of you university with each section of
the page having a differebt colour.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="contentinfo">
<img src="F:\logo.png" height="150" width="150">
<h1 > Delhi Technological University</h1>
</div>
<div id="row2">
Starting as Delhi Polytechnic in 1941, the institute became known as Delhi College of
Engineering in 1965. It was later
granted university status in 2009
</div>
<div id="row3">
The various departments are
<ol>
<li>Computer Science</li>
<li>Electrical</li>
<li>Mechanical</li>
<li>Sciences</li>
<li>Civil</li>
<li>Biotechnology</li>
</ol>
</div>
</body>
</html>
CSS#contentinfo {
text-align: center;
background-color: #C8EBEE;
padding: 30px;
#row2 {
background-color: #A7E43C;
padding: 30px;
}
#row3
{
background-color: #F5E4D3;
PRACTICAL 5
Design a page that has 5 equal columns and table should look same in all screen
resolutions.
<html>
<head>
<style >
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Responsive Table</h1>
<br>
<table width="100%" border="1">
<tr align="center">
<th width="20%">Column 1</th>
<tr align="center">
<td >Column 1</td>
<td >Column 2</td>
<td >Column 3</td>
<td >Column 4</td> </tr>
<tr align="center">
<td >A</td>
<td >B</td>
<td >C</td>
<td >D</td> </tr>
<tr align="center">
<td >a</td>
<td >b</td>
<td >c</td>
<td >c</td> </tr>
</table>
</body>
</html>
PRACTICAL 6
Design a table to contain the following options in a table.
<html>
<head>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td >Which is your <br>favorite colour?</td>

<td >Which is your national <br>leader?</td>
<td >Who has highest test centuries <br>in india?</td>
</tr>
<tr>
<td><input type="radio" name="radio1">Red</td>
<td><input type="radio" name="radio2">Sardar Patel</td>
<td><input type="radio" name="radio3">Kapil Dev</td>
</tr>
<tr>
<td><input type="radio" name="radio1">Green</td>
<td><input type="radio" name="radio2">Gandhiji</td>
<td><input type="radio" name="radio3">Sachin Tendulkar</td>
</tr>
<tr>
<td><input type="radio" name="radio1">Yellow</td>
<td><input type="radio" name="radio2">Indiraji</td>
<td><input type="radio" name="radio3">Sunil Gavaskar</td>
</tr>
<tr>
<td><input type="radio" name="radio1">Blue</td>
<td><input type="radio" name="radio2">Nehruji</td>
<td><input type="radio" name="radio3">Ajay Jadeja</td>
</tr>
</table>
</body>
</html>
PRACTICAL 7
Using Frameset and Frame tags.
<html>
<head>
</head>
<frameset cols="33%,33%,*">
<frameset rows="25%,25%,25%,25%">
<frame src="frame1.html">
</frameset>
<frameset rows="50%,50%">
</frameset>
<frameset rows="25%,*,25%">
</frameset>
</frameset>
</html>
PRACTICAL 8
Using Nested Lists.
<html>
<head>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul type="circle">
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
<li>Milk</li>
</ul>
</body>
</html>

Web Technology Lab

Uploaded by

Document Information

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

Web Technology Lab

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY LAB

Apply various font styles,colours,bold,italic.

<td >Which is your <br>favorite colour?</td>

You might also like