Scribd
Upload
14K views

Solution HTML - Program List

This document contains 20 programming tasks to create HTML code for different purposes: 1. The tasks include creating HTML code to display text with various formatting (e.g. colors, fonts, headings), embed images, and use tags like <marquee>, <pre>, and <blockquote>. 2. Many tasks involve using HTML tags in combination, such as displaying formatted text over images in a <marquee> or including formatted paragraphs with a heading and horizontal rule. 3. The last several tasks focus on demonstrating various attributes of the <marquee> tag, like direction, loop, bgcolor, and scrollamount to control scrolling text behavior.

Uploaded by

Kuldeep
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14K views

Solution HTML - Program List

This document contains 20 programming tasks to create HTML code for different purposes: 1. The tasks include creating HTML code to display text with various formatting (e.g. colors, fonts, headings), embed images, and use tags like <marquee>, <pre>, and <blockquote>. 2. Many tasks involve using HTML tags in combination, such as displaying formatted text over images in a <marquee> or including formatted paragraphs with a heading and horizontal rule. 3. The last several tasks focus on demonstrating various attributes of the <marquee> tag, like direction, loop, bgcolor, and scrollamount to control scrolling text behavior.

Uploaded by

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

SMT K.B.

SHAH(VADI VIHAR) SCIENCE COLLEGE


DEPARTMENT OF COMPUTER SCIENCE
C.U. SHAH UNIVERSITY

Class : BSCIT & BCA SEM I

Subject : 4CS01INT2 & 4CS01BNT1 : INTRODUCTION TO NETWORKING & INTERNET

PROGRAM LIST
1. Write an HTML Code to display “welcome to HTML” message with “My project” title

<html>

<head>

<title>My Project</title>

</head>

<body>

Welcome to HTML

</body>

</html>

2. Write an HTML code to display a “welcome to HTML” message with green color
background.

<html>

<head>

<title>My project</title>

</head>

<body bgcolor=green>
Welcome to HTML

</body>

</html>

3. Write an HTML code to display a “welcome to HTML” message and set the picture as
background.

<html>

<head>

<title> My Project</title>

</head>

<body background=1.jpg>

Welcome to HTML

</body>

</html>

4. Write an HTML code to display “hello world” in bold and italic font.

<html>

<head>

<title>My Project</title>

</head>

<body>

<b><i>Hello World</i></b>

</body>

</html>
5. Write an HTML code to display “Welcome to HTML” message with <h1> to <h6> heading
tags.

<html>

<head>

<title>My project</title>

</head>

<body>

<h1>Welcome to HTML </h1>

<h2>Welcome to HTML </h2>

<h3>Welcome to HTML </h3>

<h4>Welcome to HTML </h4>

<h5>Welcome to HTML </h5>

<h6>Welcome to HTML </h6>

</body>

</html>

6. Write an HTML code to display “welcome” in bold style, “to” in italic style and “HTML”
in underline style.

<html>

<head>

<title>My project</title>

</head>

<body>

<b>Welcome</b> <i>to</i> <u>HTML</u>


</body>

</html>

7. Write an HTML code which displays your name in green color.

<html>

<head>

<title>My Project</title>

</head>

<body>

<font color=green>HTML</font>

</body>

</html>

8. Write an HTML code to print the squares of the numbers 1 - 10. Each number should be
on a separate line, next to it the number 2 superscripted, an equal sign and the result.
(Example: 102 = 100)

<html>

<head>

<title>My Project</title>

</head>

<body>

1<sup>2</sup>=1 <br>

2<sup>2</sup>=4<br>

3<sup>2</sup>=9<br>

4<sup>2</sup>=16<br>
5<sup>2</sup>=25<br>

6<sup>2</sup>=36<br>

7<sup>2</sup>=49<br>

8<sup>2</sup>=64<br>

9<sup>2</sup>=81<br>

10<sup>2</sup>=100

</body>

</html>

9. Write an HTML code to print the following output


Starch - C6H10O5
Glucose - C12H22O11
Vinegar – C2H3O2
Ethyl Alcohol - C2H6O

<html>

<head>

<title>My Project</title>

</head>

<body>

Starch - C<sub>6</sub>H<sub>10</sub>O<sub>5 </sub><br>

Glucose - C<sub>12</sub>H<sub>22</sub>O<sub>11</sub><br>

Vinegar – C<sub>2</sub>H<sub>3</sub>O<sub>2</sub><br>

Ethyl Alcohol - C<sub>2</sub>H<sub>6</sub>O


</body>

</html>

10. Write an HTML code to display the numbers 1 - 10, each number being a different color.

<html>

<head>

<title>My Project</title>

</head>

<body>

<font color=violet>1</font>

<font color=indigo>2</font>

<font color=blue>3</font>

<font color=green>4</font>

<font color=yellow>5</font>

<font color=orange>6</font>

<font color=red>7</font>

<font color=teal>8</font>

<font color=orchid>9</font>

<font color=pink>10</font>

</body>

</html>

11. Write an HTML code to display your name in a Tahoma font


<html>

<head>

<title>Example of font tag </title>

</head>

<body>

<font face="Tahoma">Welcome to HTML</font>

<br><br>

<font face="Great Vibes">Welcome to HTML</font>

</body>

</html>

12. Write an HTML code to display a paragraph with 4 - 5 sentences. Each sentence should
be a different font.

<html>

<head>

<title>Example of font tag </title>

</head>

<body>

<font face="Tahoma">Welcome to HTML.</font>

<font face="Great Vibes">Welcome to HTML.</font>

<font face="Bauhaus 93">Welcome to HTML.</font>

<font face="Edwardian Script ITC">Welcome to HTML.</font>


<font face="Elephant">Welcome to HTML.</font>

</body>

</html>

13. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the
horizontal line print a paragraph relating to the text in the heading.

<html>

<head>

<title>Example of h1 and hr tag </title>

</head>

<body text=orange>

<h1>HTML</h1>

<hr size=10 color=purple>

<font color=orchid face=calibri>HTML stands for Hypertext Markup

Language. It is a markup language, not a programming language. It is

used to create a web page. The file extension of html file is either .html

or .html. It is a universal language. </font>

</body>

</html>
14. Write an HTML code to display three paragraphs of different color, size and font.

<html>

<head>

<title>Example of font tag</title>

</head>

<body>

<font color=teal size=5 face="Brush Script MT">Welcome to

html.Welcome to html.Welcome to html.Welcome to html.Welcome to

html.Welcome to html.Welcome to html.Welcome to html. </font>

<hr size=5 color=orange>

<font color=blue size=3 face="Harlow Solid">Welcome to

html.Welcome to html.Welcome to html.Welcome to html.Welcome to

html.Welcome to html.Welcome to html.Welcome to html. </font>

<hr size=5 color=orange>

<font color=green size=+4 face="arial">Welcome to html.Welcome to


html.Welcome to html.Welcome to html.Welcome to html.Welcome to

html.Welcome to html.Welcome to html. </font>

</body>

</html>

15. Write an HTML code to demonstrate <pre> and <blockquote> tag.

<html>

<head>

<title>Example of pre tag & Blockquote tag</title>

</head>

<body>

<pre>

#include &lt;stdio.h&gt;

#include &lt;conio.h&gt;

void main()

clrscr();

printf("Welcome to HTML");

getch();

</pre>
<br>

<p align=justify>Welcome to HTML. Welcome to HTML. Welcome to

HTML. Welcome to HTML. Welcome to HTML. Welcome to HTML.

Welcome to HTML. Welcome to HTML. Welcome to HTML. Welcome to

HTML. Welcome to HTML. Welcome to HTML. Welcome to HTML.

Welcome to HTML. Welcome to HTML. Welcome to HTML. Welcome to

HTML. Welcome to HTML. Welcome to HTML. Welcome to HTML.

Welcome to HTML. </p>

<blockquote> <b>This text is inside blockquote tag. It is used for

indention. It is used to display important text with indention.

</blockquote>

</body>

</html>
16. Design a webpage that displays three marquee text with different behaviour.

<html>

<head>

<title>Example of marquee tag</title>

</head>

<body bgcoloe=yellow>

<marquee behavior=slide><font color=violet size=5 >KBSSC</font>

</marquee>

<hr size=5 color=green>

<marquee behavior=alternate><font color=indigo

size=5>KBSSC</font> </marquee>

<hr size=5 color=green>

<marquee behavior=scroll><font color=blue size=5>KBSSC</font>

</marquee>

</body>

</html>
17. Design a webpage that demonstrate <marquee> tag with height and width attribute

<html>

<head>

<title>Example of marquee tag</title>

</head>

<body>

<center><marquee width=50%>

<img src=1.jpg height=100 width=100>

<img src=2.jpg height=100 width=100>

<img src=3.jpg height=100 width=100>

</marquee></center>

<br><br>

<center><marquee height=100% direction=up>

<img src=1.jpg height=100 width=100><br>

<img src=2.jpg height=100 width=100><br>

<img src=3.jpg height=100 width=100><br>

</marquee>

</body>

</html>
18. Design a webpage that demonstrate <marquee> tag with direction attribute.

<html>

<head>

<title>Example of marquee tag with direction attribute</title>

</head>

<body>

<marquee direction=left bgcolor=teal><font size=5

color=white>Welcome to HTML</font> </marquee>

<br><br><br>

<hr size=10 color=tan>

<br><br><br>

<marquee direction=right bgcolor=teal><font size=5

color=white>Welcome to HTML</font> </marquee>

</body>

</html>

19. Design a webpage that demonstrate <marquee> tag with loop and bgcolor attribute.

<html>

<head>
<title>Example of marquee tag with loop and bgcolor

attribute</title>

</head>

<body>

<marquee loop=3 bgcolor=tan><font size=5 color=white>Welcome to

HTML</font> </marquee>

<br><br>

<marquee loop=1 bgcolor=violet><font size=5 color=white>Welcome

to HTML</font> </marquee>

</body>

</html>

20. Design a webpage that display three marquee text with different scrollamount

<html>

<head>

<title>Example of marquee tag with scrollamount

attribute</title>
</head>

<body>

<marquee scrollamount=10 bgcolor=tan><font size=5

color=white>Welcome to HTML</font> </marquee>

<br><br>

<marquee scrollamount=50 bgcolor=violet><font size=5

color=white>Welcome to HTML</font> </marquee>

<br><br>

<marquee scrollamount=80 bgcolor=indigo><font size=5

color=white>Welcome to HTML</font> </marquee>

</body>

</html>

21. Design a webpage that display three marquee text with different scrolldelay.

<html>

<head>

<title>Example of marquee tag with scrollamount


attribute</title>

</head>

<body>

<marquee scrolldelay=1000 bgcolor=tan><font size=5

color=white>Welcome to HTML</font> </marquee>

<br><br>

<marquee scrolldelay=500 bgcolor=violet><font size=5

color=white>Welcome to HTML</font> </marquee>

<br><br>

<marquee scrolldelay=3000 bgcolor=indigo><font size=5

color=white>Welcome to HTML</font> </marquee>

</body>

</html>

22. Design a webpage that displays horizontal marquee text and set hspace and displays
vertical marquee text and set vspace.

<html>

<head>
<title>Example of marquee tag with hspace & V=space attribute</title>

</head>

<body>

Welcome to BCA

<br>

<marquee bgcolor=tan hspace=100 vspace=100><font size=5

color=white>Welcome to HTML</font> </marquee>

<br>Welcome to BSCIT

</body>

</html>

23. Design a webpage that demonstrates <abbr> tag.


Example : HTML(Hypertext Markup Language)

<html>

<head>

<title>Example of abbr tag</title>

</head>

<body>

<abbr title="Hypertext Markup Language">HTML</abbr>

</body>
</html>

24. Design a web page that demonstrates different horizontal line set size, width, align and
color.

<html>

<head>

<title>Example of hr tag</title>

</head>

<body>

Welcome to HTML

<hr size=5 color=#f2a1b3>

Welcome to HTML

<hr size=5 color=purple width=50% align=left>

Welcome to HTML

<hr size=5 color=tan width=250 align=right>

</body>

</html>

25. Write an HTML code to display an image that has a border of size 2, a width of 200, and
a height of 200.
<html>

<head>

<title>Example of img tag</title>

</head>

<body>

<img src=2.jpg height=200 width=200 border=2>

</body>

</html>

26. Write an HTML code to display an image, if image not found then display appropriate
message.

<html>

<head>

<title>Example of img tag with alt attribute</title>

</head>

<body>

<img src=21.jpg alt="Image not found">

</body>

</html>

27. Write an HTML code to display three images with different borders.

<html>
<head>

<title>Example of img tag with border attribute</title>

</head>

<body>

<img src=1.jpg height=200 width=200 border=2>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<img src=2.jpg height=200 width=200 border=4>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<img src=3.jpg height=200 width=200 border=6>

</body>

</html>

28. Write an HTML code to display image with hspace and vspace attribute

<html>

<head>

<title>Example of img tag with hspace & vspace

attribute</title>

</head>

<body>

welcome to bscit!<br>

<img src=1.jpg height=200 width=200 border=2 hspace=100


vspace=100>

<br>

welcome to bca!

</body>

</html>

29. Write an HTML code to demonstrate align attribute of <img> tag

<html>
<head>
<title>Example of img tag with align attribute</title>
</head>
<body>
<h2>Image tag Example</h2>
image with left align
<br><br>
<img src=1.jpg height=200 width=200 align=left>
<br><br><br><br><br><br><br><br><br><br><br><br>
image with right align
<img src=1.jpg height=200 width=200 align=right>
</body>
</html>

30. Write an HTML code that demonstrate align attribute of <img> tag
<html>
<head>
<title>Example of img tag with align attribute</title>
</head>
<body>
<h2>Image tag Example</h2>

<img src=1.jpg height=200 width=200 align=top>This is top aligned text.


<br><br><br>

<img src=1.jpg height=200 width=200 align=middle>This is middle aligned text.


<br><br><br>

<img src=1.jpg height=200 width=200 align=bottom>This is bottom aligned text.

</body>
</html>

31. Write an HTML code to create a rectangle image map in an image.

<html>
<head>
<title> Example of rectangle imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=rect coords=50,50,250,150 href=1.html>
<area shape=rect coords=300,300,400,500 href=2.html>
</map>
</body>
</html>

32. Write an HTML code to create square image map in an image

<html>
<head>
<title> Example of square imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=rect coords=100,100,500,500 href=4.html>
</map>
</body>
</html>

33. Write an HTML code to create four square image map in an image.

1.html 2.html

3.html 4.html

<html>
<head>
<title> Example of multiple squares imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=rect coords=0,0,300,300 href=10.html>
<area shape=rect coords=300,0,600,300 href=11.html>
<area shape=rect coords= 0,300,300,600 href=12.html>
<area shape=rect coords=300,300,600,600 href=13.html>
</map>
</body>
</html>

34. Write an HTML code to create circle image map in an image.

<html>
<head>
<title> Example of circle imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=circle coords=300,300,200 href=10.html>
</map>
</body>
</html>

35. Write an HTML code to create four circle image map in an image.

<html>
<head>
<title> Example of multiple circles imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=circle coords=150,150,100 href=10.html>
<area shape=circle coords=450,150,100 href=11.html>
<area shape=circle coords=150,450,100 href=12.html>
<area shape=circle coords=450,450,100 href=13.html>
</map>
</body>
</html>

36. Create triangle image map in image.

<html>
<head>
<title> Example of multiple triangles imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=poly coords=200,50,300,250,100,250 href=20.html>
<area shape=poly coords=350,50,450,250,550,50 href=21.html>
<area shape=poly coords=100,300,100,500,300,500 href=22.html>
<area shape=poly coords=350,300,550,500,550,300 href=23.html>
</map>
</body>
</html>

37. Create any polygon shape image map in image.

<html>
<head>
<title> Example of polygon imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=poly coords=300,200,450,350,300,500,150,350

href=20.html>
</map>
</body>
</html>

38. Create any polygon shape image map in image.

<html>
<head>
<title> Example of pentagon imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=poly coords=200,100,400,300,300,500,100,500,0,300

href=20.html>
</map>
</body>
</html>
39. Create any polygon shape image map in image.

<html>
<head>
<title> Example of Hexagon imagemap</title>
</head>
<body>
<img src=1.jpg height=600 width=600 usemap=#abc>
<map name=abc>
<area shape=poly

coords=200,100,300,100,350,200,300,300,200,300,150,200

href=20.html>
</map>
</body>
</html>

40. Write an HTML code to display the following output using ordered list.

<html>
<head>
<title>Example of Ordered list</title>
</head>
<body>
<ol>
<lh> <b> Computer devices</b>
<li> Keyboard
<li> Mouse
<li> Monitor
<li> Scanner
<li> Printer
</ol>
</body>
</html>

41. Write an HTML code to display the following output using ordered list.

<html>
<head>
<title>Example of Ordered list</title>
</head>
<body>
<ol>
<lh> <b> Computer devices</b>
<li> Keyboard
<li> Mouse
<li value=5> Monitor
<li> Scanner
<li> Printer
</ol>
</body>
</html>
42. Write an HTML code to display the following output.

<html>
<head>
<title>Example of Unordered list</title>
</head>
<body>
<h1> Mobile Operating System</h1>
<ul>
<li> Android
<li> Blackberry
<li> iPhone
<li> Windows phone

</ul>
<br><br>
<h1> Mobile Manufacturers </h1>
<ul>
<li type=square>Samsung
<li type=square> HTC
<li> Micromax
<li type=circle>Apple
</ul>
</body>
</html>
43. Write an HTML code to display definition list with 5 items.

<html>
<head>
<title>Example of Definition list</title>
</head>
<body>
<dl>
<dt>WWW
<dd>World Wide Web

<dt>HTML
<dd>Hyper Text Markup Language

<dt>HTTP
<dd>HyperText Transfer Protocol

<dt>FTP
<dd>File Transfer Protocol

<dt>URL
<dd> Uniform Resource Locator
</dl>
</body>
</html>

44. Write an HTML code to display the following output.

1. Articles
● a
● an
● the
2. Conjunctions
● And
● Or
● Not

<html>
<head>
<title>Example of Nested list</title>
</head>
<body>
<ol>
<li> Articles
<ul type=disc>
<li>a
<li>an
<li> the
</ul>
<li>Conjunctions
<ul type=disc>
<li>and
<li>or
<li>not
</ul>
</ol>
</body>
</html>

45. Write an HTML code to display the following output.


List of Subjects

1. Client Side scripting Language


a. VBscript
b. Javascript
2. Server Side scripting Language
● PHP
● ASP
● JSP
3. HTML
It is not a Programming language. It is a markup language.

<html>
<head>
<title>Example of Nested list</title>
</head>
<body>
<ol>
<li> Client Side Scripting Languages
<ol type=a>
<li>VBscript
<li>Javascript
</ol>
<li> Server Side Scripting Languages
<ul type=disc>
<li>PHP
<li>ASP
<li> JSP
</ul>
<li><dl>
<dt>HTML
<dd> It is not a Programming language. It is a markup

language.
</dl>
</ol>
</body>
</html>

46. Write an HTML code to display the following output using ordered list and unordered
list.
<html>
<head>
<title>Example of Nested list</title>
</head>
<body>
<ol>
<li>Input Devices
<ul type=disc>
<li>Keyboard
<li> Mouse
<li> Scanner
<li> Joystick
</ul>
<li> Output Devices
<ul type=circle>
<li>Monitor
<li> Printer
<li> Plotter
</ul>
<li> Memory
<ul type=square>
<li> RAM
<li> ROM
<li> PROM
<li> EPROM
<li> EEPROM
</ul>
</ol>
</body>
</html>

47. Write an HTML code which displays three hyperlinks and set its linkcolor, active link
color, visited link color.

<html>
<head>
<title>Example of link, alink, vlink attributes </title>
</head>
<body link=red alink=green vlink=blue>
<a href=1.html> Link1 </a>
<a href=2.html> Link2 </a>
<a href=3.html> Link3 </a>
</body>

</body>
</html>

48. Write an HTML code with a link at the top of it that when clicked will jump the way to
the bottom of the page.

<html>
<head>
<title> Example of bookmark and hyperlink</title>
</head>
<body>
<a href=#abc>Go to Bottom</a>
<h1> Chapter 1 : HTML </h1>
<p>Paragraph1
<p> Paragraph2
<hr size=10 color=tan>
<img src=1.jpg height=300 width=300>
<hr size=10 color=tan>

<p>Paragraph1
<p> Paragraph2

<hr size=10 color=tan>


<img src=2.jpg height=300 width=300>
<hr size=10 color=tan>
<a name=abc>Developed by : BCA & BSCIT Students</a>
</body>
</html>

49. Write an HTML code to display an image that when clicked will link to a search engine of
your choice (should be opened in a new window).

<html>
<head>
<title>Example of image with hyperlink</title>
</head>
<body>
<a href=http://google.com target=_blank><img src=google.png></a>
</body>
</html>

50. Write an HTML code to display 3 images containing hyperlink.

<html>
<head>
<title>Example of multiple images with hyperlink</title>
</head>
<body>
<a href=11.html><img src=1.jpg height=200 width=200 >

</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=21.html><img src=2.jpg height=200 width=200 ></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=31.html><img src=3.jpg height=200 width=200 ></a>
</body>
</html>

51. Write an HTML code to jump to a particular chapter in same document.

Chapter 1 | Chapter 2 | Chapter 3

Chapter 1 : HTML
Chapter 2 : CSS

Chapter 3 : Javasript

<html>
<head>
<title>Hyperlink & bookmark example</title>

</head>
<body>
<a href=#ch1>Chapter 1</a> | <a href=#ch2>Chapter 2</a> | <a

href=#ch3>Chapter 3</a>
<h1><a name=ch1>Chapter 1 : HTML</a></h1>
<hr size=9 color=tan>
HTML stands for Hyper Text Markup Lanaguage. It is a markup

Language. It is not a programming language.


<br><br>
<img src=html.jpg height=300 width=300>
<br><br>
<p>HTML stands for Hyper Text Markup Lanaguage. It is a markup

Language. It is not a programming language.

<br><br>
<p> HTML stands for Hyper Text Markup Lanaguage. It is a markup

Language. It is not a programming language.

<br><br><br>

<h1><a name=ch2>Chapter 2 : CSS</a> </h1>


<hr size=9 color=tan>
<br>
CSS stands for Cascadding Style Sheet. It is used to change the

default formatting of HTML tags.


<br><br>
<img src=css.jpg height=300 width=300>
<br><br>
<p>CSS stands for Cascadding Style Sheet. It is used to change the

default formatting of HTML tags.


<br><br>
<p>CSS stands for Cascadding Style Sheet. It is used to change the

default formatting of HTML tags.CSS stands for Cascadding Style

Sheet. It is used to change the default formatting of HTML tags.

<br><br>
<h1><a name=ch3> Chapter 3: Javascript</a> </h1>
<hr size=9 color=tan>
<br>
Javascript is a client side scripting langauge. It is used for vertification

and validation.
<br><br>
<img src=js.jpg height=300 width=300>
<br><br>
<p> Javascript is a client side scripting langauge. It is used for

vertification and validation.


<br><br>
<p>Javascript is a client side scripting langauge. It is used for

vertification and validation.

</body>
</html>

52. Write an HTML code to set the base directory and display image loaded from that
directory.
<html>
<head>
<title> Example of base tag </title>
<base href="../images/">
</head>
<body>
<img src=11.jpg>

</html>

53. Write an HTML code to display the following table with the following data.

Community Male Female

General 12 10

OBC 35 40

SC/ST 23 12

<html>
<head>
<title> Example of table tag </title>
</head>
<body>
<table border=3 cellpadding=10>
<tr>
<th> Community
<th>Male
<th>Female
<tr>
<td> General
<td>12
<td>10
<tr>
<td>OBC
<td>35
<td>40
<tr>
<td>SC/ST
<td>23
<td>12
</table>
</body>
</html>

54. Write an HTML code to display the following table output.

<html>
<head>
<title>Example of bgcolor attribute of tr tag</title>
</head>
<body>
<table border=3 cellpadding=10>
<tr bgcolor=orange>
<th>Rollno
<th>Name
<tr>
<td>1
<td>aaa
<tr bgcolor=green>
<td>2
<td>bbb
</table>

</body>
</html>

55. Write an HTML code to display the following output.


<html>
<head>
<title>Example of background attribute of td tag</title>
</head>
<body>
<table border=3 cellpadding=20>
<tr>
<th background=21.jpg>Rollno
<th background=21.jpg>Name
<tr>
<td>1
<td>aaa
<tr>
<td background=21.jpg>2
<td background=21.jpg>bbb
</table>

</body>
</html>

56. Write an HTML code to display the following table.


<html>
<head>
<title> Example of bgcolor attribute of td tag </title>
</head>
<body>
<table border=3 cellpadding=10>
<tr>
<td bgcolor=red>1
<td bgcolor=green>2
<td bgcolor=blue>3
<tr>
<td bgcolor=cyan>4
<td bgcolor=purple>5
<td bgcolor=pink>6
</table>
</body>
</html>

57. Write an HTML code to display the following table with the following data.

<html>
<head>
<title> Example of bgcolor attribute of table tag</title>
</head>
<body>
<table border=3 cellpadding=10 bgcolor=green>
<tr><font color=white>
<th><font color=white>No</font>
<th> <font color=white>Name</font>
<tr>
<td><font color=white> P1201</font>
<td><font color=white>AAA</font>
<tr>
<td><font color=white>P1202</font>
<td><font color=white>BBB</font>
</table>
</body>
</html>

58. Write an HTML code to display the following table with the following data

<html>
<head>
<title>Example of rowspan attribute of td tag</title>
</head>
<body>
<table border=3 cellpadding=10>
<tr>
<th>Brand
<th> Modelno
<th>Price
<tr>
<th rowspan=3>Hyundai
<td>I10
<td>5,00,000
<tr>
<td>I20
<td>5,50,000
<tr>
<td>VERNA
<td>9,00,000
<tr>
<th rowspan=3> Maruti
<td>RITZ
<td>4,00,000
<tr>
<td>SWIFT DESIRE
<td>5,00,000
<tr>
<td>WAGONR
<td>4,25,000
<tr>
<th rowspan=3>TATA
<td>INDICA
<td>4,00,000
<tr>
<td>INDIGO
<td>5,00,000
<tr>
<td>SAFARI
<td>4,25,000

</table>
</body>
</html>

59. Create table with rowspan and colspan attribute of table in HTML. ( Prepare timetable
of your class). Include cellpadding and cellspacing.

<html>
<head>
<title>Example of preparing timetable with rowspan and colspan

attribute</title>
</head>
<body>
<table border=3 cellpadding=10>
<tr align=center bgcolor=#d3d3d3>
<th>Time
<th>Monday
<th>Tuesday

<th>Wednesday
<th> Thursday
<th>Friday
<th>Saturday
<tr align=center>
<th bgcolor=#d3d3d3>10:30 AM to <br>11:30AM
<td>1BI:FE(NS)
<td>1BI:MATHS(RPV)
<td>1BI:MATHS(RPV)
<td>1BI: CBO(NHD)
<td>1BI: NT&INT(KRV)
<td bgcolor=#a9a9a9>&nbsp;
<tr align=center>
<th bgcolor=#d3d3d3>11:30 AM to <br>12:30 PM
<td>1BI:FE(NS)
<td>1BI:FE(NS)
<td>1BI:FE(NS)
<td>1BI: C(VGS)
<td>1BI: C(VGS)
<td bgcolor=#a9a9a9>&nbsp;
<tr align=center bgcolor=#d3d3d3>
<th>12:30 PM to <br>1:15 PM
<th colspan=6>RECESS
<tr align=center>
<th bgcolor=#d3d3d3>1:15 PM to <br>2:15PM
<td rowspan=2>1BI:NT&INT(KRV)<br>(LAB-1)
<td rowspan=2>1BI:CBO(NHD)<br>(LAB-1)

<td rowspan=2>1BI:C(VGS)<br>(LAB-1)

<td rowspan=2>1BI:C(VGS)<br>(LAB-1)

<td rowspan=2>1BI:NT&INT(KRV)<br>(LAB-1)

<td bgcolor=#a9a9a9> &nbsp;


<tr align=center>
<th bgcolor=#d3d3d3>2:15 PM to<br> 3:15 PM
<td bgcolor=#a9a9a9>&nbsp;
<tr align=center bgcolor=#d3d3d3>
<th > 3:15 PM to<br> 3:30 PM
<th colspan=6>RECESS
<tr align=center>
<th bgcolor=#d3d3d3>3:30 PM to <br>04:30 PM
<td>1BI:MATHS(RPV)
<td>1BI: CBO(NHD)
<td>1BI: NT&INT(KRV)
<td>1BI: NT&INT(KRV)
<td>1BI: CBO(NHD)
<td bgcolor=#a9a9a9>&nbsp;

<tr align=center>
<th bgcolor=#d3d3d3>4:30 PM to <br>05:30 PM
<td>1BI:MATHS(RPV)
<td>1BI: C(VGS)
<td>1BI: C(VGS)
<td>1BI: NT&INT(KRV)
<td>1BI: CBO(NHD)
<td bgcolor=#a9a9a9>&nbsp;

</table>

</body>
</html>

60. Write an HTML code to display the following table.

STATE OF FASTING VALUE


AFTER EATING
HEALTH MINIMUM MAXIMUM
2 HRS AFTER
HEALTHY 70 100
EATING
PRE –
101 126 LESS THAN 140
DIABETES
MORE THAN
DIABETES N/A MORE THAN 200
216
<html>
<head>
<title>Example of rowspan and colspan attribute of td

tag</title>
</head>
<body>
<table border=3 cellpadding=10>
<tr align=center bgcolor=tan>
<th rowspan=2> STEATE OF <BR>HEALTH
<th colspan=2>FASTING VALUE
<th rowspan=2> AFTER EATING
<tr align=center bgcolor=tan>
<th>MINIMUM
<th>MAXIMUM
<tr align=center>
<td>HEALTHY
<td>70
<td>100
<td>2 HRS AFTER <br> EATING
<tr align=center>
<td>PRE - <br> DIABETES
<td>101
<td align=center>126
<td> LESS THAN 140
<tr align=center>
<td> DIABETES
<td>MORE THAN <br> 216
<td> N/A
<td> MORE THAN 200
</table>
</body>
</html>
61. Write an HTML code to display the following table

MON TUE WED THU FRI


MORNING FREE BUSY
FREE
AFTERNOON BUSY
FREE FREE
EVENING FREE
FREE BUSY
OVERNIGHT

<html>
<head>
<title>Example of table </title>
</head>
<body>
<table border=3 cellpadding=10>
<tr>
<th>&nbsp;
<th> MON
<th> TUE
<th>WED
<th> THU
<th>FRI
<tr>
<td><b>MORNING</b>
<td>Free
<td rowspan=4>Free
<td rowspan=2>Free
<td>Busy
<td rowspan=4>Free
<tr>
<td><b>AFTERNOON</b>
<td>Busy
<td rowspan=3>Free
<tr>
<td><b>EVENING
<td rowspan=2>Free
<td rowspan=2>Busy
<tr>
<td><b>OVERNIGHT
</table>
</body>
</html>

62. Create an HTML table like below .

<html>
<head>
<title>Example of table</title>
</head>
<body>
<table cellpadding=10>
<tr>
<td align=right>Red
<td bgcolor=red height=20 width=20>&nbsp;
<tr>
<td align=right>Blue
<td bgcolor=blue height=20 width=20>&nbsp;
<tr>
<td align=right>Green
<td bgcolor=green height=20 width=20>&nbsp;
<tr>
<td align=right>Orange
<td bgcolor=orange height=20 width=20>&nbsp;

</body>
</html>

63. Write an HTML code to display the following table output.


<html>
<head>
<title>Example of table </title>
</head>
<body>
<table border=3 cellspacing=5>
<tr>
<th>&nbsp;
<th> Year length
<th>Day length
<tr>
<th>Mercury
<td>88 days
<td> 59 days
<tr>
<td>&nbsp;
<td>&nbsp;
<td>&nbsp;
<tr>
<th>Venus
<td>225 days
<td> 243 days
<tr>
<th>Earth
<td>365 days
<td>24 hrs.
<tr>
<th>Mars
<td>687 days
<td>24.6 hrs.
</table>
</body>
</html>

64. Write an HTML code to display the following table output.

<html>
<head>
<title>Example of table </title>
</head>
<body>
<table border=3 cellpadding=10>
<tr align=center>
<td>1
<td colspan=3>2
<tr align=center>
<td rowspan=3>3
<td bgcolor=orange>4
<td bgcolor=orange>5
<td rowspan=2 bgcolor=yellow>6
<tr>
<td bgcolor=orange>7
<td bgcolor=orange>8
<tr>
<td colspan=2 bgcolor=yellow>9
<td bgcolor=yellow>10

</table>
</body>
</html>

65. Write an HTML code to display the following table output.


<html>
<head>
<title>Example of table </title>
</head>
<body>
<table border=3 cellpadding=10>
<tr bgcolor=grey>
<th colspan=2>Conference Schedule
<tr bgcolor=teal>
<td>Convention office and Press Room
<td> 8.00 am to 6:00 pm
<tr bgcolor=grey>
<td>Registration
<td> 8.00 am to 6:00 pm
<tr bgcolor=teal>
<td>Professional Placement Service
<td> 8.00 am to 6:00 pm
<tr bgcolor=grey>
<td> Panel Paper Room Sales
<td>9:30 am to 5:30 pm
<tr bgcolor=teal>
<td>Exhibits
<td>9:30 am to 5:30 pm
<tr bgcolor=grey>
<td>Child Care
<td> 8:30 am to 10:00 pm
</table>

</body>
</html>

66. Design following frame in HTML.


1.html

2.html

<html>
<frameset rows=50%,*>
<frame src=1.html>
<frame src=2.html>
</frameset>
</html>

67. Design following frame Structure in HTML

1.html 2.html 3.html

<html>
<frameset cols=33%,33%,*>
<frame src=1.html>
<frame src=2.html>
<frame src=3.html>
</frameset>
</html>

68. Design following frame Structure in HTML.

1.html 2.html

3.html

<html>
<frameset cols=50%,*>
<frameset rows=50%,50%>
<frame src=1.html>
<frame src=3.html>
</frameset>
<frame src=2.html>
</frameset>
</html>

69. Design following frame Structure in HTML.

1.html 2.html 4.html


3.html

<html>
<frameset cols=33%,33%,*>
<frame src=1.html>
<frameset rows=50%,*>
<frame src=2.html>
<frame src=3.html>
</frameset>
<frame src=4.html>
</frameset>
</html>

70. Design following frame Structure in HTML.

1.html 2.html 3.html

4.html 5.html

6.html 7.html

<html>
<frameset cols=33%,33%,*>
<frameset rows=33%,33%,*>
<frame src=1.html>
<frame src=4.html>
<frame src=6.html>
</frameset>
<frame src=2.html>
<frameset rows=33%,33%,*>
<frame src=3.html>
<frame src=5.html>
<frame src=7.html>

</frameset>
</frameset>
</html>

71. Design following frame Structure in HTML.

1.html

2.html 3.html

<html>
<frameset rows=30%,*>
<frame src=1.html>
<frameset cols=30%,*>
<frame src=2.html>
<frame src=3.html>
</frameset>
</frameset>
</html>

72. Create a set of frames to show the following data

Fruits Select any of the item shown on the left


Animals frame.
Birds
fruit.html
<html>
<body bgcolor=magenta>
<h1>Fruits</h1>
<hr color=gold size=10>
Apple
<br>
Mango
<br>
Banana
</body>
</html>

animal.html
<html>
<body bgcolor=red>
<h1>Animals</h1>
<hr color=gold size=10>
Cow
<br>
dod
<br>
Horse
</body>
</html>

bird.html
<html>
<body bgcolor=green>
<h1>Birds</h1>
<hr color=gold size=10>
Peacock
<br>
Sparrow
<br>
Crow
</body>
</html>

left.html
<html>
<body>
<center>
<a href=bird.html target=f2>Birds</a>
<br><br>
<a href=animal.html target=f2>Animals</a>
<br><br>
<a href=fruit.html target=f2>Fruits</a>
</center>
</body>
</html>

right.html
<html>
<body bgcolor=tan>
</body>
</html>

72.html
<html>
<frameset cols=30%,*>
<frame src=left.html name=f1>
<frame src=right.html name=f2>
</frameset>
</html>

73. Design the web code to display the following table with hyperlinks the department
name for every information inside the table

Sr. Courses
Department Name
no. UG PG

1 Computer Science Yes Yes


2 Maths Yes Yes

3 Chemistry No Yes

4 Commerce Yes Yes

cs.html
<html>
<body bgcolor=orchid>
<h1>Welcome to Computer Science department</h1>
</body>
</html>

maths.html
<html>
<body bgcolor=orchid>
<h1>Welcome to Maths department</h1>
</body>
</html>

chemistry.html
<html>
<body bgcolor=orchid>
<h1>Welcome to Chemistry department</h1>
</body>
</html>

commerce.html
<html>
<body bgcolor=orchid>
<h1>Welcome to Commerce department</h1>
</body>
</html>

73.html
<html>
<head>
<title>Example of links with table</title>
</head>
<body>
<table border=3 cellpadding=10>
<tr>
<th rowspan=2>Sr. No.
<th rowspan=2>Department name
<th colspan=2>Courses
<tr>
<th>UG
<th>PG
<tr>
<td>1
<td><a href=cs.html>Computer Science</a>
<td>Yes
<td>Yes
<tr>
<td>2
<td><a href=maths.html>Maths</a>
<td>Yes
<td>Yes
<tr>
<td>3
<td><a href=chemistry.html>Chemistry</a>
<td>No
<td>Yes
<tr>
<td>4
<td><a href=commerce.html>Commerce</a>
<td>Yes
<td>Yes
</table>
</body>
</html>
74. Create an HTML code using frames.

bca.html
<html>
<body>
<font color=red size=7 face="Great Vibes">Wecome to BCA</font
</body>
</html>

bscit.html
<html>
<body>
<font color=green size=7 face="Great Vibes">Wecome to BSCIT</font
</body>
</html>

pgdca.html
<html>
<body>
<font color=blue size=7 face="Great Vibes">Wecome to PGDCA</font
</body>
</html>

left1.html
<html>
<body>
<center>
<a href=bca.html target=f2>BCA</a>
<br><br>
<a href=bscit.html target=f2>BSCIT</a>
<br><br>
<a href=pgdca.html target=f2>PGDCA</a>
<br><br>

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

right1.html
<html>
<body bgcolor=orchid>
</body>
</html>

top.html
<html>
<body>
<marquee behavior=alternate><font color=orchid size=7>C.U.Shah
University</font></marquee>
</body>
</html>

74.html
<html>
<frameset rows=20%,*>
<frame src=top.html>
<frameset cols=30%,*>
<frame src=left1.html name=f1>
<frame src=right1.html name=f2>
</frameset>
</frameset>
</html>

75. Create an HTML code with inline frames which displays selected department page into
the frame.
Computer Science Physics Chemistry Maths

Inline frame which displays the page of selected


department

<html>
<head>
<title>Example of inline frame</title>
</head>
<body>
<center>
<a href=cs.html target=f1>Computer Science</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=physics.html target=f1>Physics</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=chemistry.html target=f1>Chemistry</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=maths.html target=f1>Maths</a>

<br><br>

<iframe name=f1 height=400 width=500></iframe>


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

76. Create your resume using HTML tags that uses colors, text, link & image.

77. Write an HTML code to display the following form elements.


<html>
<head>
<title>Example of form elements</title>
</head>
<body bgcolor=tan>
<center>
<h2> Fruit Survey</h2>
<form>
<table cellpadding=10>
<tr>
<th>Name : <td> <input type=text name=t1>
<tr>
<th>Address : <td><input type=text name=t2>
<tr>
<th>E-mail : <td><input type=text name=t3>
<tr>
<th>How many pieces of fruit <br> do you eat per day ?
<td><input type=radio name=r1 value=0>0
<br>
<input type=radio name=r1 value=1>1
<br>
<input type=radio name=r1 value=2>2
<br>
<input type=radio name=r1 value=">2">more than 2
<tr>
<th> My favourite fruit :
<td><select name=s1 size=4>
<option>Apple
<option>Mango
<option>Banana
<option>Grapes
<option>Pomegranate
</select>
<tr>
<th>Would you like a <br>brochure? <td><input type=checkbox

name=c1 value=yes>
<tr>
<th colspan=2><input type=submit name=b1 value=Submit>

</table>
</form>
</center>
</body>
</html>

78. Write an HTML code to display the following output .

<html>
<head>
<title>Example of form elements</title>
</head>
<body>
<form>
<font color=red>Name :</font> <input type=text name=t1>
<br><br>
<font color=green>E-mail : </font> <input type=text name=t2>
<br><br>
<h3>Input and then hit submit.</h3>
<br>
<textarea name=t3 rows=10 cols=30></textarea>
<input type=submit name=b1 value="Submit">
<input type=reset name=b2 value="Reset and Clear">

</form>

</body>
</html>

79. Write an HTML code to display the following output using form elements.

<html>
<head>
<title>Example of form elements</title>
</head>
<body>
<h2>Insert Data form </h2>
<form>
<table cellpadding=10>
<tr>
<td> Employee ID :
<td><input type=text name=t1 size=3>
<tr>
<td>First name :
<td><input type=text name=t2 size=20>
<tr>
<td>Last name :
<td><input type=text name=t3 size=20>
<tr>
<td>Department No:
<td><input type=text name=t4 size=3>
<tr>
<td>Start Date :
<td><input type=text name=t5 size=10>
<tr>
<td>Salary :
<td><input type=text name=t6 size=8>
<tr>
<td>Contractor :
<td><input type=checkbox name=c1

value=yes>Yes
<tr>
<td>&nbsp;
<td><input type=submit name=b1

value=Submit>&nbsp;&nbsp;<input type=reset

name=b2 value="Clear Form">


</table>
</form>
</body>
</html>

80. Write an HTML code to display the following output using form elements.
<html>
<head>
<title>Example of form elements</title>
</head>
<body>
<table cellpadding=10>
<form>
<tr>
<td>Name
<td><input type=text name=t1>
<tr>
<td>Password
<td><input type=password name=t2>
<tr>
<td>Gender
<td><input type=radio name=r1 value=male>Male<br>
<input type=radio name=r1 value=female>Female
<tr>
<td>Meals
<td><input type=checkbox name=c1 value=breakfast>Breakfast
<br>
<input type=checkbox name=c2 value=lunch>Lunch
<br>
<input type=checkbox name=c3 value=dinner>Dinner
<tr>
<td>Remark
<td><textarea name=t3 rows=5 cols=20></textarea>

</form>
</table>
</form>
</body>
</html>

81. Write an HTML code to display the following output .


<html>
<body bgcolor=cyan>
<form>
<h2 align=center>Registration Form</h2>
<table cellpadding=10 align=center>
<tr>
<td> First name :
<td><input type=text name=t1>
<tr>
<td>Last name :
<td><input type=text name=t2>
<tr>
<td>Age:
<td><input type=text name=t3>
<tr>
<td>E-mail ID :
<td><input type=text name=t4>
<tr>
<td> Password :
<td><input type=password name=t5>
<tr>
<td>Sex :
<td><input type=radio name=r1 value=male>Male
<input type=radio name=r1 value=female>Female
<tr>
<td>Checkbox:
<td><input type=checkbox name=c1 value=student>I am a

Student
<td><input type=checkbox name=c2 value=businessman>I

am a businessman
<tr>
<td>Birthday :
<td>Day :<select name=s1>
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
Month:<select name=s2>
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12

</select>
Year : <select name=s3>
<option>2000
<option>2001
<option>2002
<option>2003
<option>2004
</select>
<tr>
<td colspan=2><center>Submit button : <input type=submit

name=b1 value=Submit>
<tr>
<td colspan=2><center>Reset button : <input type=reset

name=b2 value=Reset>

</form>

</body>
</html>

82. Write an HTML code to display the following output using form elements.

<html>
<body>
<table border=3 cellpadding=10>
<form>
<tr>
<th>Enter no1:
<td><input type=text name=t1>
<tr>
<th>Enter no2:
<td><input type=text name=t2>
<tr>
<td colspan=2><input type=button name=b1 value=+>
<input type=button name=b2 value=->
<input type=button name=b3 value=*>
<input type=button name=b4 value=/>
<tr>
<th>Answer:
<td><input type=text name=t3>

</form>
</table>
</body>
</html>

83. Write an HTML code to display the following output using form elements

<html>
<body>
<table border=3 cellpadding=10>
<form>
<tr>
<th>Enter no1:
<td><input type=text name=t1>
<tr>
<th>Enter no2:
<td><input type=text name=t2>
<tr>
<td colspan=2><input type=button name=b1 value=">">
<input type=button name=b2 value="<">
<tr>
<th>Answer:
<td><input type=text name=t3>

</form>
</table>
</body>
</html>

84. Write an HTML code to display the form which demonstrates fieldset and optgroup
form elements.

<html>
<body>
<form>
<fieldset>
<legend>Select background color</legend>
<input type=radio name=r1 value=red>Red
<input type=radio name=r1 value=green>Green
<input type=radio name=r1 value=blue>Blue
</fieldset>
Select Vehicle :
<select name=s1>
<optgroup label="Select Two wheeler">
<option> Access
<option>Activa
</optgroup>
<optgroup label="Select Four wheeler">
<option>I10
<option>I20
</optgroup>
</select>
</form>
</body>
</html>

You might also like