HTML Record PDF

Web Programming 121317054061
1. Create a webpage to display your subject titles using font tag.
Code:
<html>
<head>
<title> Subject Title </title>
</head>
<body>
<h2> Subject Titles using Font Tag</h2>
<br> <br>
<font size="7" color="red"> Communication Theory </font><br>
<font size="6" color="#0000FF" face="verdana" > Linear Algebra

</font><br>
<font size="5" color="brown" face="comic sans ms"> Mathematical

Statistics </font><br>
<font size="4" color="rgb(255,69,0)" face="Times New Roman">

Microproccesor </font><br>
<font size="3" color="olive" face="impact"> PHP and MySQL

</font><br>
<font size="2" color="navy" face="georgia"> Web Programming

</font>
</body>
<html>
Output
B.Sc(MECs) Computer Science: Sem 5 Page 1 Phaguni Giria

2. Create a web page displaying Physical Tags and Logical Tags.
Code:
<html>
<head>
<title> Physical and Logical Tags </title>
</head>
<body>
<h2> Physical Tags </h2>
This is <b> Bold </b>.<br>

This is <big> Big Font </big>.<br>
This is <i> Italic </i>.<br>
Was <s>$50</s>;now $40.<br>
This is <small> Small</small>.<br>
H<sub>2</sub>0<br>
May 5<sup>th</sup>,2019<br>
This is <tt> Fixed Width Fonth </tt>.<br>
This is <u> Underlined</u>.<br>
<h2> Logical Tags</h2>

This is used for a short <cite>quote</cite>.<br>
<code>y = m * x + b</code><br>
<del>Deleted</del> text.<br>
<dfn>definition</dfn> text.<br>
This is <em> emphasized </em>. <br>
<ins>inserted</ins> text.<br>
<kbd>code</kbd> sample.<br>
<samp>code</samp> sample.<br>
This is <strong>strong</strong>.<br>
<var>program</var> variable.<br>
</body>
<html>
Output:

3. Create a web page showing Definition list for HTML,CSS,DHTML
Code:
<html>
<head>
<title> Definition List</title>
</head>
<body>
<h2> Definition List </h2>
<dl>
<dt> HTML</dt>
<dd> HTML stands for Hyper Text Markup Language. It describes
the structure of the Web page.
It consists of series of elements, which are represented
by tags. HTML elements tell the browser
how to display the content.</dd>
<dt> CSS</dt>
<dd> CSS stands for Cascading Style Sheets. CSS is a language
that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
CSS saves a lot of work. It can control the layout of
multiple web pages all at once.</dd>
<dt>DHTML</dt>
<dd>DHTML stands for Dynamic HTML, it is totally different from
HTML.
The DHTML is based on the properties of the HTML,
javascript, CSS, and DOM which helps in making dynamic content.
The DHTML make use of Dynamic object model to make
changes in settings and also in properties and methods.</dd>
</dl>
</body>
</html>
Output:

4. Create a webpage to display the list of courses being offered in college.

a. set background image
b. Insert an image as college logo aligned left.
c. Give the heading as college name.
d. Add a horizontal row using <HR> tag.
e. Create a nested ordered list.
Code:
<html>
<head>
<title> List of courses</title>
</head>
<body background="bg.jpg">
<h1>
<img src="logo.jpg" height="120" width="200" alt="logo" align="left"
hspace=30 vspace=0>
<br>
<center>St Francis College For Women</center>
</h1>
<br>
<hr>
<h3>List of courses offered:</h3>
<ol>
<li><b>Under Graduate Courses </b></li>
<ol type="i">
<li> B.Com.(Bachelor of Commerce)<li>
<li>B.A.(Bachelor of Humanities & Social Sciences)</li>
<li>B.M.S.(Bachelor of Management Studies)</li>
<li>B.Sc.(Bachelor of Science)</li>
<li>B.Sc.(Hons)Software Engineering</li>
</ol>
<li><b>Post Graduate Courses</b></li>
<ol type="i">
<li>M.Com.(Applied Finance)</li>
<li>M.Sc.Mathematics</li>
<li>M.Sc.Applied Psychology</li>
<li>Masters in Mass Communication & Journalism</li>
<li>M.Sc.Computer Science</li>
<li>M.Sc.Microbiology</li>
<li>M.Sc.Organic Chemistry</li>
</ol>
</ol>
<body>
</html>

Output:

5. Write an HTML code to create a Web page that contains an <img> by using all its attributes.
Code:
<html>
<head>
<title> Image Tag and attributes</title>
</head>
<body>
<center>
<h1> Image Tag and it's Attributes</h1></center>
<img src="flower2.jpg" height="250" width="250" border="5"
align="middle" alt="flower" hspace="500">
</body>
</html>
Output:

6. Create an HTML page to demonstrate image wrapping.
Code:
<html>
<head>
<title>Image Wrapping</title>
</head>
<body bgcolor="burlywood">
<center>
<h1>Image Wrapping</h1>
</center>
<img src="tea.jpg" height="200" width="200" border="3" align="left"
alt="tea" >
<h3>TEA</h3>
<p>Tea is an aromatic beverage commonly prepared by pouring hot or
boiling water over cured leaves of the Camellia sinensis, an evergreen
shrub
(bush) native to East Asia. After water, it is the most widely consumed
drink in the world. There are many different types of tea; some, like
Darjeeling and Chinese greens, have a cooling, slightly bitter, and
astringent flavour, while others have vastly different profiles that
include
sweet, nutty, floral or grassy notes.
Tea originated in Southwest China during the Shang dynasty, where it
was used as a medicinal drink. An early credible record of tea drinking
dates
to the 3rd century AD, in a medical text written by Hua Tuo. It was
popularized as a recreational drink during the Chinese Tang dynasty,
and tea
drinking spread to other East Asian countries. Portuguese priests and
merchants introduced it to Europe during the 16th century. During the
17th
century, drinking tea became fashionable among Britons, who started
large-scale production and commercialization of the plant in India.
Combined,
China and India supplied 62% of the world's tea in 2016.
The term herbal tea refers to drinks not made from Camellia sinensis:
infusions of fruit, leaves, or other parts of the plant, such as steeps
of
rosehip, chamomile, or rooibos. These are sometimes called tisanes or
herbal infusions to prevent confusion with tea made from the tea plant.
</p>
<img src="coffee.jpg" height="200" width="200" border="3" align="right"

alt="coffee" >
<h3>COFFEE</h3>
<p>Coffee is a brewed drink prepared from roasted coffee beans, the
seeds of berries from certain Coffea species. The genus Coffea is
native to
tropical Africa (specifically having its origin in Ethiopia and Sudan)
and Madagascar, the Comoros, Mauritius, and Réunion in the Indian
Ocean.

Coffee plants are now cultivated in over 70 countries, primarily in the

equatorial regions of the Americas, Southeast Asia, Indian
subcontinent,
and Africa. The two most commonly grown are C. arabica and C. robusta.
Once ripe, coffee berries are picked, processed, and dried. Dried
coffee
seeds (referred to as "beans") are roasted to varying degrees,
depending on the desired flavor. Roasted beans are ground and then
brewed with
near-boiling water to produce the beverage known as coffee.
</p>
</body>
</html>
Output:

7. Create a webpage to generate your timetable using table tag.
Code:
<html>
<head>
<title> Time Table</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="7">
<caption><h1> Time Table</h1></caption>
<tr>
<th> Day Order</th>
<th> 1<sup>st</sup> Hour</th>
<th> 2<sup>nd</sup> Hour</th>
<th> 3<sup>rd</sup> Hour</th>
<th rowspan="7">L<br>U<br>N<br>C<br>H</th>
<th> 4<sup>th</sup> Hour</th>
</tr>
<tr>
<td>1</td>
<td>Microprocessor</td>
<td>Linear Algebra</td>
<td>Web Programming</td>
<td colspan="3" align="center"> Microprocessor
Practicals...</td>
</tr>
<tr>
<td>2</td>
<td colspan="3" align="center"> Linear Algebra
Practicals...</td>
<td>Mathematical Statistics</td>
<td>PHP and MySQL</td>
<td>Communication Theory</td>
</tr>
<tr>
<td>3</td>
<td colspan="3" align="center">Web Programming
Practicals...</td>
<td>Web Programmig</td>
</tr>
<tr>
<td>4</td>
<td colspan="3" align="center">Mathematical Statistics
Practicals...</td>
<td>Web Programmig</td>
</tr>
<tr>
<td>5</td>

<td colspan="3" align="center"> Communication Theory
Practicals...</td>
</tr>
<tr>
<td>6</td>
<td colspan="3" align="center">PHP and MySQL Practicals...</td>
</tr>
</table>
</body>
</html>
Output:

8. Create a nested table.
Code:
<html>
<head>
<title>Nested table</title>
</head>
<body>
<table border="6" bordercolor="red" cellspacing="3" cellpadding="4">
<tr>
<td>
<table border="5" bordercolor="lime" cellpadding="5">
<tr>
<th>TIC</th>
<th>TAC</th>
<th>TOE</th>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
</table>
</td>
<td>
<table border="5" bordercolor="blue" cellpadding="5">
<tr>
<th>TIC</th>
<th>TAC</th>
<th>TOE</th>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>

<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:

9. Create a web page to demonstrate hyperlinks using

a. Inter linking
b. Intralinking
c. Graphical hyperlinking
Code a: Interlinking
<html>
<head>
<title> Internal Linking </title>
</head>
<body>
<h1> Internal Linking </h1>
<a href="#Lession.1">Lession.1</a> <br />
<br> <br>
<br> <br>
<br> <br>
<br>
<br>
<br>
<br> <br> <br> <br> <br> <br> <br>
<a name="Lession.1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<br>
<br>


<br />
<br />
<br />
<br />
</body>
</html>
Output a:
On clicking the links the following output is displayed

Code b:
<html>
<head>
<title> Intralinking </title>
<head>
<body>
<h1> Intralinking (or) External linking </h1>
<h3> Web Browser</h3>
<p>
A web browser, or simply "browser," is an application used to access
and view websites.
The primary function of a web browser is to render HTML, the code used
to design or "mark up" webpages.
Each time a browser loads a web page, it processes the HTML, which may
include text, links, and references
to images and other items, such as cascading style sheets and
JavaScript functions.
The browser processes these items, then renders them in the browser
window.</p>
<a href="browser.html"> Click for list of web browsers! </a>
</body>
<html>
browser.html
<html>
<head>
<title> Browser</title>
</head>
<body>
<ul>
<li>Microsoft Internet Explorer</li>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Apple Safari</li>
<li>Opera</li>
<li>UC Browser</li>
<li>Netscape</li>
</ul>
</body>
</html>
Output b:

Code c:
<html>
<head>
<title>Graphical hyperlink </title>
<head>
<body>
<h1> Eiffel Tower</h1>
<a href="eiffel.html"><img src="eiffel.jpeg" alt="eiffel tower"
align="middle" border="4" width="300" height="400"></a>
</body>
<html>
eiffel.html
<html>
<head>
<title>Eiffel Tower </title>
<head>
<body bgcolor="pink">
<center>
<h1> <font face="Verdana"> Eiffel Tower </font></h1>
<img src="eiffel1.jpg" alt="eiffel tower" align="middle" border="2"
width="300" height="300">
</center>
<p>
The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars
in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed
and built the tower.
Constructed from 1887 to 1889 as the entrance to the 1889 World's Fair,
it was initially criticised by some of France's
leading artists and intellectuals for its design, but it has become a
global cultural icon of France and one of the
most recognisable structures in the world.The Eiffel Tower is the most-
visited paid monument in the world; 6.91 million
people ascended it in 2015.The tower is 324 metres (1,063 ft) tall,
about the same height as an
81-storey building, and the tallest structure in Paris.
</p>
</body>
<html>
Output c:

10. Create a webpage to display four equal sized frames

a. Frame 1 containing an image1
b. Frame 2 with image1 description
c. Frame 3 containing an image2
d. Frame 4 with image2 description
Code:
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame name="1" src="img1.html">
<frame name="2" src="lotus.html">
</frameset>
<frame name="3" src="img2.html">
<frame name="4" src="orchid.html">
</frameset>
</frameset>
<html>
img1.html
<html>
<head>
<title> Lotus</title>
</head>
<body>
<img src="lotus.jpg" height="280" width="500">
</body>
</html>
img2.html
<html>
<head>
<title> Orchid</title>
</head>
<body>
<img src="orchid.jpg" height="280" width="500">
</body>
</html>
lotus.html
<html>
<head>
<title> Lotus</title>
</head>
<body bgcolor="skyblue">

<center><h1>LOTUS</h1></center>
<p>
Nelumbo nucifera, also known as Indian lotus or simply lotus, is one of
two extant species of aquatic plant
in the family Nelumbonaceae.It is often colloquially called a water
lily.
Under favorable circumstances the seeds of this aquatic perennial may
remain viable for many years,
with the oldest recorded lotus germination being from that of seeds
1,300 years old recovered from a
dry lakebed in northeastern China.
</p>
</body>
</html>
orchid.html
<html>
<head>
<title> Orchid</title>
</head>
<body bgcolor="orange">
<center><h1>ORCHID</h1></center>
<p>
The orchids are a large family of flowering plants, the Orchidaceae.
They are herbaceous monocots.
There are between 22,000 and 26,000 species in 880 genera.
They make up between 6–11% of all seed plants. Orchidscan be found in
almost every country in the world except
for Antarctica.People have grown orchids for a 5 number of years. They
grow orchids for show, for science, or for food
</p>
</body>
</html>
Output:

11. Create a webpage to illustrate target frames.
Code:
<html>
<head>
<title>Target Frames</title>
</head>
<frameset rows="20%,80%">
<frame name="1" src="cafe.html">
<frame name="2" src="beverages.html">
<frame name="display" src="default.html">
</frameset>
</frameset>
<html>
cafe.html
<html>
<head>
<title> cafe</title>
</head>
<body bgcolor="purple">
<center>
<h1>C A F E<sup>`</sup></h1>
<center>
</body>
</html>
beverages.html
<html>
<head>
<title>Beverages</title>
</head>
<body>
<center>
<h1>Beverages</h1>
</center>
<ol type="i">
<li><a href="juice.html" target="display">Juice</a></li>
<li><a href="coffee.html" target="display">Coffee</a></li>
<li><a href="tea.html" target="display">Tea</a></li>
</ol>
</body>
</html>

juice.html
<html>
<head>
<title>Juice</title>
</head>
<body>
<center>
<h1>JUICES</h1>
</center>
<ol type="a">
<li>Watermelon Juice</li>
<li>Orange Juice</li>
<li>Sugarcane Juice</li>
<li>Grapefruit Juice</li>
<li>Cranberry Juice</li>
</ol>
</body>
</html>
coffee.html
<html>
<head>
<title>Coffee</title>
</head>
<body>
<center>
<h1>COFFEE</h1>
</center>
<ol type="a">
<li>Espresso</li>
<li>Cappuccino</li>
<li>Cafe Latte</li>
<li>Cold Coffee</li>
<li>Caffe Mocha </li>
</ol>
</body>
</html>
tea.html
<html>
<head>
<title>Tea</title>
</head>
<body>
<center>
<h1> TEA</h1>
</center>
<ol type="a">
<li>Green Tea</li>
<li>Black Tea</li>
<li>Masala Tea</li>
<li>Ginger Tea</li>

</ol>
</body>
</html>
Default.html
<html>
<head>
<title>display</title>
</head>
<body>
<h1> Click a Hyperlink!</h1>
</body>
</html>
Output:

12. Create a webpage to display an inline frame

a. Make a webpage for a shopping website
b. Use inline frame to show the different deals that are currently running on the
website.
Code:
<html>
<head>
<title>Inline Frames</title>
</head>
<body bgcolor="deepskyblue">
<h1> JABONG

<a href="home.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html" >Contact</a>
</h1>
<center><img src="jabong.png"></center>
<br><br>
<img src="shopping.jpg" height="400" width="600">

<iframe width=50% height=73% name=frame1 src="deals.html">
</iframe><br>
</body>
</html>
home.html
<html>
<head>
<title> Home Page</title>
</head>
<center>
<h1> HURRY UP! </h1>
<h1> SHOP NOW</h1>
<h2> Sale from 28<sup>th</sup>September to
02<sup>nd</sup>October.</h2>
</center>
</body>
</html>

shop.html
<html>
<head>
<title>Shop</title>
</head>
<center>
<h1> Shop range of products with us... </h1>
</center>
<ol>
<li>New In </li>
<li>Clothing</li>
<li>Ethnic wear </li>
<li>Bags</li>
<li>Watches</li>
<li>Footwear</li>
<li>Accessories </li>
<li>Travel Bags</li>
<li>Electronics</li>
</ol>
</body>
</html>
contact.html
<html>
<head>
<title>Contact</title>
</head>
<body bgcolor="beige">
<center>
<h1> CONTACT US</h1>
</center>
<h2>Website: jabong.com</h2>
<h2>Email-Id: jabongindia@gmail.com</h2>
<h2>Contact Number: 9912425357</h2>
</body>
</html>
deals.html
<html>
<head>
<title> Deals</title>
</head>
<center><h1> BEST DEALS</h1></center>
<marquee height="13%" width="100%" direction="right"
scrollamount="10" bgcolor="yellow">
<font color="brown" size="7"><b>50% OFF on ELECTRONICS</b></font>
</marquee>
<br><br>
<center>

<img src="sale.jpg" height="200" width="400" alt="deals">

</center>
</body>
<html>
Output:

13. Write HTML Code to create an external style sheet to set the list properties.
Code:
<html>
<head>
<title>External Style Sheet </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> External Style Sheets</h1>
<ol>
<li>Desserts</li>
<ul class="one">
<li>Chocolate Brownie</li>
<li>Donuts</li>
<li>Cake</li>
<li>Tart</li>
</ul>
<li>Ice Cream</li>
<ul class="two">
<li>Vanilla</li>
<li>Butterscotch</li>
<li>Strawberry</li>
<li>Double Chocolate</li>
</ul>
</ol>
</body>
</html>
Style.css
h1 {color:red;}
ul.one {background:deepskyblue;
list-style-type:disc;
position:inside;
marker-offset:1cm;}
ul.two{background:gold;
list-style-type:round;
position:inside;
marker-offset:1cm;}
ol {background:chocolate;
list-style-type:upper-roman;
position:outside;}

Output:

14. Write HTML Code to demonstrate inline style sheet to set the font properties.
Code:
<html>
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<h1 style="color:orange;font-face:georgia;font-stretch:ultra-
expanded;">INLINE STYLE SHEETS</h1>
<p style="color:red;font-variant:small-caps;">This is red
color</p>
<p style="color:blue;font-weight:bolder;">Sky is blue in color</p>
<p style="font-size:50px;font-style:italic;">Perfect!</p>
</body>
</html>
Output:

15. Write HTML Code to create an embedded style sheet to set background and table properties.
Code:
<html>
<head>
<title>Embedded Stylesheet</title>
<style>
body {background: beige url("saving.jpg") no-repeat fixed right
top;}
h1 {color:brown;}
table{border:4px solid black;
border-collapse:collapse;
height:50%;
width:50%;
caption-side:center;}
td,th{border:2px solid black;
border-spacing:15px;
padding:30px;
text-align:left;}
th{background-color:powderblue;}
</style>
</head>
<body>
<h1>Internal Style Sheets</h1>
<table>
<caption><h2>Monthly Savings</h2></caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Output:

16. Create a web page using all form controls to make your resume.
Code:
<html>
<head>
<title>Resume</title>
</head>
<body>
<center><h1> RESUME</h1></center>
<form>
NAME: <input type="text" size="30">
<br><br>
FATHER'S NAME: <input type="text" size="30">
<br><br>
MOTHER'S NAME: <input type="text" size="30">
<br><br>
DOB: <select name="Date">
<option>1 <option>2 <option>3 <option>4 <option>5
<option>31
</select>
<select name="Month">
<option>Jan <option>Feb <option>Mar <option>Apr <option>May
<option>Jun <option>Jul <option>Aug <option>Sept <option>Oct
<option>Nov <option>Dec
</select>
<select name="Year">
</select>
<br><br>
ADDRESS: <textarea align="texttop" maxlength="20" name="a" rows="8"
cols="40"></textarea>
<br><br>
PHONE NUMBERS: <input type="text" size="15"> <input type="text"
size="15">
<br><br>
EMAIL-ID: <input type="text" size="30">
<br><br>
GENDER: Male<input type="radio" name="b" value="yes">
Female<input type="radio" name="b" value="no">
<br><br>
MARITAL STATUS: Single<input type="radio" name="b" value="yes">
Married<input type="radio" name="b" value="no">
<br><br>
LANGUAGES KNOWN: <input type="text" size="40">
<br><br>
CAREER OBJECTIVE: <textarea maxlength="50" name="a" rows="2"
<br><br>
EDUCATIONAL QUALIFICATION:<br>

<ul>
<li>PG <input type="text" size"3" value="Year of Passout"> <input
type="text" size"3" value="% scored">
<input type="text" size"40" value="Name of the
Institution"></li><br>
<li>UG <input type="text" size"3" value="Year of Passout"> <input
<li>Inter <input type="text" size"3" value="Year of Passout"> <input
<li>10th <input type="text" size"3" value="Year of Passout"> <input
<input type="text" size"40" value="Name of the Institution"></li>
</ul>
<br>
ADDITIONAL QUALIFICATION: <textarea maxlength="70" name="a" rows="2"
<br><br>
WORK EXPERIENCE (if any): <textarea maxlength="70" name="a" rows="2"
<br><br>
AWARDS AND ACHIEVEMENTS: <textarea maxlength="70" name="a" rows="3"
<br><br>
STRENGTHS: <textarea maxlength="70" name="a" rows="3"
WEAKNESS: <textarea maxlength="70" name="a" rows="3"
<br><br>
REFERENCE: <textarea maxlength="70" name="a" rows="4"
<br><br>
</form>
</body>
</html>

Output:

17. Write a javascript program to print welcome message. Hint:(Use document.write() statement)
Code:
<html>
<head>
<title>Java Script</title>
</head>
<h1>JAVASCRIPT</h1>
<script Language="javaScript">
document.write("Hello World!");
document.write("<br>");
document.write("Welcome to JavaScript");
</script>
</body>
</html>
Output:

18. Write a javascript program to perform arithmetic operations.
Code:
<html>
<head>
<title> Arithmetic Operations </title>
<Script Language="JavaScript">
var n1,n2,sum,diff,prod,quo,mod;
n1=parseInt(prompt("Enter the first number", "n1"));

n2=parseInt(prompt("Enter the second number", "n2"));
sum=n1+n2;
diff=n1-n2;
prod=n1*n2;
quo=n1/n2;
mod=n1%n2;
</Script>
</head>
<body>
<h1>The result of Arithmetic Operations are:</h1>
<Script language="JavaScript">
document.write("The sum of two numbers is "+ sum +"<br>");
document.write("The difference of two numbers is "+
diff+"<br>");
document.write("The product of two numbers is "+ prod+"<br>");
document.write("The quotient of two numbers is "+ quo+"<br>");
document.write("The remainder of two numbers is "+ mod+"<br>");
</Script>
</body>
</html>
Output:

19. Write a javascript program to check whether a number is even or odd. Hint: (Use If-else, and alert
box to display the answer)
Code:
<html>
<head>
<title>Odd or Even</title>
</head>
<body>
<Script Language="javaScript">
var n1;
n1=parseInt(prompt("Enter a number to check odd or
even:","n1"));
if(n1%2==0)
{
window.alert("It is an EVEN number.");
}
else
{
window.alert("It ia ODD number.");
}
</Script>
</body>
</html>
Output:

20. Write a java script to accept R,G,B colors and set the background color as per the choice.
Code:
<html>
<head>
<title>Change the Background Color Dynamically with
JavaScript</title>
</head>
<body>
<center>
<h1>Hello World!</h1>
<h1>The background color is: </h1>
<Script type="text/javascript">
var c=window.prompt("Enter the color:");
switch (c)
{
case 'red':
document.body.style.backgroundColor='red';
break;
case 'green':
document.body.style.backgroundColor='green';
break;
case 'blue':
document.body.style.backgroundColor='blue';
break;
default:
window.alert("Wrong color. Enter again!!");
break;
}
</script>
</body>
</html>
Output:

21. Write a javascript program to demonstrate for String and Math Objects.
Code a (Math Objects):
<html>
<head>
<title>JavaScript Math Object</title>
<p id="FGF"></p>

<script>
document.write("<br>");
document.getElementById("FGF").innerHTML =
"Math.LN10: " + Math.LN10 + "<br>" +
"Math.LOG2E: " + Math.LOG2E + "<br>" +
"Math.Log10E: " + Math.LOG10E + "<br>" +
"Math.SQRT2: " + Math.SQRT2 + "<br>" +
"Math.SQRT1_2: " + Math.SQRT1_2 + "<br>" +
"Math.LN2: " + Math.LN2 + "<br>" +
"Math.E: " + Math.E + "<br>" +
"Math.PI: " + Math.PI;
</script>
</head>
<body>
<h2>Math Object Properties (above)</h2>
<h2>Math Object Methods (below)</h2>
<p id="GFG" style = "color:blue;"></p>

<script>
document.getElementById("GFG").innerHTML =
"<p><b>Math.abs(-4.7):</b> " + Math.abs(-4.7) + "</p>" +
"<p><b>Math.ceil(4.4):</b> " + Math.ceil(4.4) + "</p>" +
"<p><b>Math.floor(4.7):</b> " + Math.floor(4.7) + "</p>" +
"<p><b>Math.sin(90 * Math.PI / 180):</b> " +
Math.sin(90 * Math.PI / 180) + "</p>" +
"<p><b>Math.min(0, 150, 30, 20, -8, -200):</b> " +
Math.min(0, 150, 30, 20, -8, -200) + "</p>" +
"<p><b>Math.random():</b> " + Math.random() + "</p>";
</script>
</body>
</html>
Output a:

Code b (String objects):
<html>
<head>
<title>String Objects</title>
</head>
<body>
<h1> String Objects</h1>
<Script Language="javaScript">
var str="javascript";
var s2=" concat example";
var s3="javascript from javatpoint indexof";
var s4="JavaScript toUpperCase Example";
var s5="JavaScript toLowerCase Example";
var s6="abcdefgh";
var s7=" javascript trim ";
//JavaScript String charAt(index) Method
document.write("String charAt(index) Method: "+str.charAt(2)+"<br>");
//JavaScript String concat(str) Method
var p=str.concat(s2);
document.write("String concat(str) Method: "+p+"<br>");
//JavaScript String indexOf(str) Method
var n=s3.indexOf("from");
document.write("String indexOf(str): "+n+"<br>");
//JavaScript String lastIndexOf(str) Method
var n1=s3.lastIndexOf("java");
document.write("String lastIndexOf(str): "+n1+"<br>");
//JavaScript String toUpperCase() Method
var n3=s4.toUpperCase();
document.write("String toUpperCase(): "+n3+"<br>");
//JavaScript String toLowerCase() Method
var n4=s5.toLowerCase();
document.write("String toLowerCase(): "+n4+"<br>");
//JavaScript String slice(beginIndex, endIndex) Method
var n5=s6.slice(2,5);
document.write("String slice(beginIndex, endIndex): "+n5+"<br>");
//JavaScript String trim() Method
var n6=s7.trim();
document.write("String trim(): "+n6+"<br>");
</Script>
</body>
</html>
Output b:

22.Write a javascript program to accept and display the values, and sum of 10 array elements.
Hint: (Use prompt box to accept elements).
Code:
<html>
<head>
<title>Array Sum</title>
</head>
<body>
<script language="javascript">
var myArray = new Array(10);
var n=parseInt(prompt("Enter size of array"," "));
var i,sum=0;
for(i=0;i<n;i++)
{
myArray[i]=parseInt(prompt("Enter the elements of
array",""));
sum = sum+myArray[i];
}
for(i=0;i<n;i++)
{
document.write("Item " + i + " in array is:" + myArray[i] +
"."+"<br/>");
}
document.write("Sum of array elements = " +sum);
</script>
</body>
</html>
Output:

23. Create a web page using form controls to display calculator.
Code:
<html>
<head>
<title> program </title>
<Script Language="JavaScript">
function sum()
{
var sum;
document.f1.textfield3.value=parseInt(document.f1.textfield1.value)+
parseInt(document.f1.textfield2.value);
}
function diff()
{
document.f1.textfield3.value=parseInt(document.f1.textfield1.value)-
}
function mul()
{
document.f1.textfield3.value=parseInt(document.f1.textfield1.value)*
}
function div()
{
document.f1.textfield3.value=parseInt(document.f1.textfield1.value)/
}
function mod()
{
document.f1.textfield3.value=parseInt(document.f1.textfield1.value)%
}
</Script>
</head>
<body>
<center>
<h1> CALCULATOR </H1>
<h3>Using Form Controls</h3>
<form name="f1">
Enter first number:<input type=Text Name="textfield1" size=25>
<br>
Enter second number:<input type=Text Name="textfield2" size=25>
<br>
RESULT:<input type=Text Name="textfield3" size=25> <br>
<input type=button Value="Addition" onclick="sum()">
<input type=button Value="Subtraction" onclick="diff()">
<input type=button Value="Multiplication" onclick="mul()">
<input type=button Value="Division" onclick="div()">
<input type=button Value="Mod" onclick="mod()">
</form>

</center>
</body>
</html>
Output:

24. Create a web page using mouse events.
Code:
<html>
<head>
<title> Mouse Events </title>
<style>
.yellow{color:yellow}
.blue{color:blue}
</style>
</head>
<body onMouseDown="document.bgColor='red'">
<center>
<h1>Click this page to turn it red! </h1>
<br>
<h1>Using Dynamic Styles </h1>
<span onmouseover="this.style.fontSize='48'">
This is my paper4 class, bscIIIE
fifth semester,out going batch
</span>
<br>
<h1 onmouseover="this.style.color='green';"
onmouseout="this.style.color='blue';">
Turn me green with the mouse.</h1>
<br>
<h1 onmouseover="this.style.cursor='hand';"
onmouseout="this.style.cursor='default';">
Change the cursor with the mouse </h1>
<br>

<h1 class=blue onmouseover="this.className='yellow'"
onmouseout="this.clasName='blue'">
Move the mouse here to change colors </h1>
</center>
</body>
</html>
Output:

HTML Record PDF

Uploaded by

HTML Record PDF

Uploaded by

Web Programming 121317054061

1. Create a webpage to display your subject titles using font tag.

<font size="6" color="#0000FF" face="verdana" > Linear Algebra

<font size="5" color="brown" face="comic sans ms"> Mathematical

<font size="4" color="rgb(255,69,0)" face="Times New Roman">

<font size="3" color="olive" face="impact"> PHP and MySQL

<font size="2" color="navy" face="georgia"> Web Programming

B.Sc(MECs) Computer Science: Sem 5 Page 1 Phaguni Giria

2. Create a web page displaying Physical Tags and Logical Tags.

This is <b> Bold </b>.<br>

<h2> Logical Tags</h2>

B.Sc(MECs) Computer Science: Sem 5 Page 2 Phaguni Giria

3. Create a web page showing Definition list for HTML,CSS,DHTML

B.Sc(MECs) Computer Science: Sem 5 Page 3 Phaguni Giria

4. Create a webpage to display the list of courses being offered in college.

B.Sc(MECs) Computer Science: Sem 5 Page 4 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 5 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 6 Phaguni Giria

6. Create an HTML page to demonstrate image wrapping.

<img src="coffee.jpg" height="200" width="200" border="3" align="right"

B.Sc(MECs) Computer Science: Sem 5 Page 7 Phaguni Giria

Coffee plants are now cultivated in over 70 countries, primarily in the

B.Sc(MECs) Computer Science: Sem 5 Page 8 Phaguni Giria

7. Create a webpage to generate your timetable using table tag.

B.Sc(MECs) Computer Science: Sem 5 Page 9 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 10 Phaguni Giria

8. Create a nested table.

B.Sc(MECs) Computer Science: Sem 5 Page 11 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 12 Phaguni Giria

9. Create a web page to demonstrate hyperlinks using

B.Sc(MECs) Computer Science: Sem 5 Page 13 Phaguni Giria

<p>This is sub topic.1</p>

On clicking the links the following output is displayed

B.Sc(MECs) Computer Science: Sem 5 Page 14 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 15 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 16 Phaguni Giria

10. Create a webpage to display four equal sized frames

B.Sc(MECs) Computer Science: Sem 5 Page 17 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 18 Phaguni Giria

11. Create a webpage to illustrate target frames.

B.Sc(MECs) Computer Science: Sem 5 Page 19 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 20 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 21 Phaguni Giria

12. Create a webpage to display an inline frame

<img src="shopping.jpg" height="400" width="600">

B.Sc(MECs) Computer Science: Sem 5 Page 22 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 23 Phaguni Giria

<img src="sale.jpg" height="200" width="400" alt="deals">

B.Sc(MECs) Computer Science: Sem 5 Page 24 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 25 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 26 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 27 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 28 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 29 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 30 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 31 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 32 Phaguni Giria

18. Write a javascript program to perform arithmetic operations.

n1=parseInt(prompt("Enter the first number", "n1"));

B.Sc(MECs) Computer Science: Sem 5 Page 33 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 34 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 35 Phaguni Giria

Code a (Math Objects):

B.Sc(MECs) Computer Science: Sem 5 Page 36 Phaguni Giria

Code b (String objects):

B.Sc(MECs) Computer Science: Sem 5 Page 37 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 38 Phaguni Giria

23. Create a web page using form controls to display calculator.

B.Sc(MECs) Computer Science: Sem 5 Page 39 Phaguni Giria

B.Sc(MECs) Computer Science: Sem 5 Page 40 Phaguni Giria

24. Create a web page using mouse events.

B.Sc(MECs) Computer Science: Sem 5 Page 41 Phaguni Giria

You might also like