Part A Web Design Lab HTML
PROGRAM 1
<!-- A Program to illustrate body and pre tags -->
<html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow" background="[Link]">
This is an Illustration of body tag with its properties
<pre>
This text uses
pre tag and preserves
nextline and spaces </pre>
This text doesnt uses
pre tag so doesnt preserves
nextline and spaces.. everything
will be printed in the same line
</body>
</html>
OUTPUT
2
Part A Web Design Lab HTML
PROGRAM 2
<!-- A Program to illustrate text Font tag -->
<html>
<title> Font tag Example </title>
<body>
<font face="arial" size="1" color="blue"> WELCOME </font> <br>
<font size="2" color="cyan"> WELCOME </font> <br>
<font size="3" color="red"> WELCOME </font> <br>
<font size="4" color="yellow"> WELCOME </font> <br>
<font size="5" color="green"> WELCOME </font> <br>
<font size="6" color="brown"> WELCOME </font> <br>
<font size="7" color="pink"> WELCOME </font> <br>
<font size="20" color="gray"> WELCOME </font> <br>
</body>
</html>
OUTPUT
3
Part A Web Design Lab HTML
PROGRAM 3
<!-- A Program to illustrate comment,h1….h6, and div tag -->
<html>
<head>
<title> Illustrating comment, h1...h6 and div tags </title>
</head>
<body>
<!-- THIS IS A COMMENT LINE -->
<div style="color:#00ff00">
<h1 align="center"> This is h1 tag text with center aligned </h1>
<h2 align="left"> This is h2 tag text with left aligned </h2>
<h3 align="right">This is h3 tag text with right aligned </h3>
</div>
<h4> This is h4 tag text without alignment</h4>
<h5> This is h5 tag Text without alignment </h5>
<h6> This is h6 tag text without alignment </h6>
</body>
</html>
OUTPUT
4
Part A Web Design Lab HTML
PROGRAM 4
<!-- A Program to illustrate text formatting tags -->
<html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P> <marquee behavior="alternate"> This is an alternate Marquee text
</marquee>
<p> This is <i> italized </i> </p>
<p> This is <u> underlined </u> </p>
<p> This is <b> bold </b> </p>
<p> This is <em> emphasized </em> </p>
<p>This is <Strong> Strong Text </strong> </p>
<p> This is <s> striked text </s> </p>
<p> This is <code> computer code </code> </p>
<p> This is <sup> superscript </sup> code </p>
<p> This is <sub> subscript </sub> code </p>
<p> This is <big> big text </big> </p>
<p> This is <small> small text </small> </p>
</center>
</body>
</html>
5
Part A Web Design Lab HTML
OUTPUT
6
Part A Web Design Lab HTML
PROGRAM 5
<!-- A Program to illustrate Order List tag -->
<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 7
Part A Web Design Lab HTML
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
OUTPUT
8
Part A Web Design Lab HTML
PROGRAM 6
<!-- A Program to illustrate Unorder List tag -->
<html>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Dept. Of CS & IS, Gvt. Polytechnic, Gulbarga 9
Part A Web Design Lab HTML
OUTPUT
10
Part A Web Design Lab HTML
PROGRAM 7
<!-- A Program to illustrate Nested and Definition tag -->
<html>
<head>
<title> Nested and Definition List <title>
</head>
<body>
<h3 align="center"> To illustrate Nested and Definition List Tags </h3>
<hr color="red">
<h4> An ordered nested List: </h4>
<ol>
<li> Coffee </li>
<li> Tea
<ol type= "a">
<li> Black tea </li>
<li> Green tea </li>
<ol type= "i" >
<li> China </li>
<li> Africa </li>
</ol>
</ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl>
<dt> Bangalore </dt>
<dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt>
<dd> -Capital city of Maharashtra </dd>
</dl>
</body>
</html>
11
Part A Web Design Lab HTML
OUTPUT
12
Part A Web Design Lab HTML
PROGRAM 8
<!-- A Program to illustrate Img tag -->
<html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center" style="color:red"> To illustrate image tags</h3> <hr>
<p>
<img src="[Link]" align="right" height="100" width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="[Link]" align="left" height="100" width="100"/>
This image is left aligned with the text
</p>
<br><br><br><br><hr>
This image is center aligned with the text.
<img src="[Link]" align="middle" height="100" width="100"/>
<br><br><br><br><hr>
This image is bottom aligned with the text.
<img src="[Link]" align="bottom" height="100" width="100"/>
<br><br><br><br><hr>
This image is top aligned with the text.
<img src="[Link]" align="top" height="100" width="100"/>
</body>
</html>
13
Part A Web Design Lab HTML
OUTPUT
14
Part A Web Design Lab HTML
PROGRAM 9
<!-- A Program to illustrate Hyper Link tag (Anchor tag) -->
[Link]
<html>
<head>
<title> Link Tag </title>
</head>
<title>
<body>
<h3 align="center" style="color:red">To illustrate link Tags</h3> <hr>
Text as a link/hyperlink to another page : <a href="[Link] "> Click here!!!</a>
<hr>
Image as a link/hyperlink :<a href="[Link]">
<img src="[Link]" width="32" height="32" align="bottom"/></a>
<hr>
<p>
<a href="#C8">See also Chapter 8 ( link within a page )</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains Pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operator</p>
<h2>Chapter 4</a></h2>
<p>This chapter explains structure</p>
<h2>Chapter 5</h2>
<p>This chapter explains arrays</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expressions</p>
<h2><a name="C8">Chapter 8</h2>
<p>This chapter explains Binary Trees</p>
<h2>Chapter 9</h2>
<p>This chapter explains Unordered trees</p>
<h2>Chapter 10</h2>
<p>This chapter explains Statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<h2>Chapter 12</h2>
15
Part A Web Design Lab HTML
<p>This chapter explains sorting</p>
<h2>Chapter 13</h2>
<p>This chapter explains Binary sort</p>
<h2>Chapter 14</h2>
<p>This chapter explains merge sort</p>
<h2>Chapter 15</h2>
<p>This chapter explains heap sort</p>
</body>
</html>
[Link]
<html>
<head>
<title> [Link] </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
<a href="[Link]"> Go to home </a>
</body>
</html>
16
Part A Web Design Lab HTML
OUTPUT
After Clicking On Click Me or the Flower image the output is
17
Part A Web Design Lab HTML
After Clicking on the See also Chapter 8(link within a page) the output is
18
Part A Web Design Lab HTML
PROGRAM 10
<!-- A Program to illustrate Table tag -->
<html>
<head>
<title> Table tag </title>
</head>
<body>
<center>
<h4>Table with border, vertical headers, cellpadding and cellspacing</h4>
<table border="10" cellpadding="10" cellspacing="10">
<tr>
<td></td>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
</tr>
<tr>
<th>Student 1</th>
<td>Radha Desai</td>
<td>20</td>
<td>123 456 789</td>
</tr>
<tr>
<th>Student 2</th>
<td>Geetha Bharadwaj</td>
<td>21</td>
<td>267 891 281</td>
</tr>
</table>
<hr>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Radha</td>
<td>555 77 854</td>
<td>555 77 855</td>
19
Part A Web Design Lab HTML
</tr>
</table>
<hr>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</center>
</body>
</html> OUTPUT
20
Part A Web Design Lab HTML
PROGRAM 11
<!-- A Program to illustrate Frame tag -->
[Link]
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,60">
<frame src="[Link]">
<frame src="[Link]" name="main">
</frameset>
</frameset>
</head>
</html>
[Link]
<html>
<head>
<title> [Link] </title>
</head>
<body>
<h3> States of karnataka </h3>
<a href="[Link]" target="main"> gulbarga<br></a>
<a href="[Link]" target="main"> Bidar<br> </a>
</body>
</html>
[Link]
<html>
<head>
<title> [Link] </title>
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
[Link]
<html>
<head>
<title> [Link] </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>
21
Part A Web Design Lab HTML
</body>
</html>
[Link]
<html>
<head>
<title> [Link] </title>
</head>
<body bgcolor="red">
<h1> Welcome to bidar </h1>
</body>
</html>
OUTPUT
After Clicking On Gulbarga the output is :
After Clicking On Bidar the output is :
22
Part A Web Design Lab HTML
PROGRAM 12
<!-- A Program to illustrate Form tag -->
<html>
<head>
<title> form tag </title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password" >
<p>This is a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" checked> yes
<input type="radio" name="n" checked> no </p>
<p><b><u>Checkbox Options</u></b><br>
Sunday<input type="checkbox" checked >
Monday<input type="checkbox" >
Tuesday<input type="checkbox" >
</p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>
23
Part A Web Design Lab HTML
OUTPUT
24
Part A Web Design Lab HTML
PROGRAM 13
<!-- A Program to illustrate span tag -->
<html>
<head>
<title> span tag </title>
<style type="text/css">
[Link]{ color:lightskyblue; font-weight:bold;}
[Link]{ color:darkolivegreen; font-weight:bold;}
</style>
</head>
<body>
<p align="center">
<font size=10>
my mother has <span class="blue"> light blue </span> eyes and
my father has <span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>
OUTPUT
25
Part A Web Design Lab HTML
PROGRAM 14
<!-- A Program to illustrate CSS (cascading style sheet) -->
<html>
<head>
<title> css demo </title>
<style type="text/css">
body { background-color:red;}
h1 { color:orange; text-align:center;}
p { font-family: "Times new roman "; font-size: 20px;}
</style>
</head>
<body>
<h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>
</body>
</html>
OUTPUT
26
Part A Web Design Lab HTML
PROGRAM 15
<!-- A Program to illustrate Embedded Multimedia -->
<html>
<head>
<title> embedding multimedia </title>
</head>
<body>
<center>
<h1> Here is a video embedded on this webpage </h1>
<br>
<object data="[Link]" type="video/msvideo" height=200 width=200
hspace=200 vspace=200>
</object>
</center>
</body>
</html>
OUTPUT
27