Scribd
Upload
77 views

Web Technology Lab

This document contains the code for 8 practical assignments completed by a student named Manav Middha for a Web Technology lab class. The practical assignments involve creating basic HTML pages using different tags like headings, paragraphs, lists, links, images, tables and frames. Styles are added using fonts, colors, bold, italics and CSS. The final practical demonstrates nested lists.

Uploaded by

Sher Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
77 views

Web Technology Lab

This document contains the code for 8 practical assignments completed by a student named Manav Middha for a Web Technology lab class. The practical assignments involve creating basic HTML pages using different tags like headings, paragraphs, lists, links, images, tables and frames. Styles are added using fonts, colors, bold, italics and CSS. The final practical demonstrates nested lists.

Uploaded by

Sher Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

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>
<title>Practical 2</title>
</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>
<title>Practical 3</title>
</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>
<title>Practical 4</title>
<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>
<title>Practical 5</title>
<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>
<th width="20%">Column 2</th>
<th width="20%">Column 3</th>
<th width="20%">Column 4</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>
<title>Practical 6</title>
<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>
<title>Practical 7</title>
</head>
<frameset cols="33%,33%,*">
<frameset rows="25%,25%,25%,25%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
<frameset rows="50%,50%">
<frame src="frame5.html">

<frame src="frame6.html">
</frameset>
<frameset rows="25%,*,25%">
<frame src="frame7.html">
<frame src="frame8.html">
<frame src="frame9.html">
</frameset>

</frameset>
</html>

PRACTICAL 8
Using Nested Lists.

<html>
<head>
<title>Practical 8</title>
</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>

You might also like