Scribd
Upload
75 views

Program 1

The document contains examples of various HTML tags for formatting text and adding images and links. Program 1 demonstrates the <body> and <pre> tags. Program 2 shows the <font> tag for changing text properties. Later programs illustrate headings, comments, text formatting, lists, images, and hyperlinks using tags such as <h1-6>, <div>, <p>, <ol>, <ul>, <img>, and <a>. The output section is blank, suggesting the programs are examples rather than fully functional pages.

Uploaded by

agoyal5145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

Program 1

The document contains examples of various HTML tags for formatting text and adding images and links. Program 1 demonstrates the <body> and <pre> tags. Program 2 shows the <font> tag for changing text properties. Later programs illustrate headings, comments, text formatting, lists, images, and hyperlinks using tags such as <h1-6>, <div>, <p>, <ol>, <ul>, <img>, and <a>. The output section is blank, suggesting the programs are examples rather than fully functional pages.

Uploaded by

agoyal5145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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="Desert.jpg">
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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 5


Part A Web Design Lab HTML

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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, Govt. Polytechnic, Gulbarga 9


Part A Web Design Lab HTML

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 11


Part A Web Design Lab HTML

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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="flower.bmp" align="right" height="100" width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="flower.bmp" 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="flower.bmp" align="middle" height="100" width="100"/>
<br><br><br><br><hr>
This image is bottom aligned with the text.
<img src="flower.bmp" align="bottom" height="100" width="100"/>
<br><br><br><br><hr>
This image is top aligned with the text.
<img src="flower.bmp" align="top" height="100" width="100"/>

</body>
</html>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 13


Part A Web Design Lab HTML

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 14


Part A Web Design Lab HTML

PROGRAM 9

<!-- A Program to illustrate Hyper Link tag (Anchor tag) -->

Home.html
<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="page1.html "> Click here!!!</a>
<hr>
Image as a link/hyperlink :<a href="page1.html">
<img src="flower.bmp" 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>
Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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>

Page1.html

<html>
<head>
<title> Page1.html </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
<a href="home.html"> Go to home </a>
</body>
</html>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 16


Part A Web Design Lab HTML

OUTPUT

After Clicking On Click Me or the Flower image the output is

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 17


Part A Web Design Lab HTML

After Clicking on the See also Chapter 8(link within a page) the output is

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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>
Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 20


Part A Web Design Lab HTML

PROGRAM 11

<!-- A Program to illustrate Frame tag -->


mainframe.html
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,60">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</frameset>
</head>
</html>
f1.html
<html>
<head>
<title> f1.html </title>
</head>
<body>
<h3> States of karnataka </h3>
<a href="gul.html" target="main"> gulbarga<br></a>
<a href="bid.html" target="main"> Bidar<br> </a>
</body>
</html>
f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
gulbarga.html
<html>
<head>
<title> Gulbarga.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 21


Part A Web Design Lab HTML

</body>
</html>
bidar.html
<html>
<head>
<title> bidar.html </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 :

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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>

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 23


Part A Web Design Lab HTML

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 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="Wildlife.wmv" type="video/msvideo" height=200 width=200


hspace=200 vspace=200>
</object>

</center>
</body>
</html>

OUTPUT

Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 27

You might also like