Programs HTML

1. Create a webpage to display the following output(use text box,submit button).
<html>
<head>
<title>TEXT BOX</title>
</head>
<body>
<center>
<h2>This webpage displays name and address TEXT BOX with submit button</h2>
<form >
Name : <input type="text" maxlength="25" size="30"><br><br>
Address : <input type="text" size="30" maxlength="25"><br><br>
<input type="submit">
</form>
</center>
</body>
</html>
2.Create a webpage to display the timetable of your class using table.
<html>
<head>
<title>Time table</title>
</head>
<body>
<table align="center" border="2">
<tr>
<th>Day/Time</th>
<th>9:00 am - 10:00 am</th>
<th>10:00 am - 11:00 am</th>
<th>11:00 am - 12:00 noon</th>
<th>12:00 noon - 12:30 pm</th>
<th>12:30 pm - 1:30 pm</th>
<th>1:30 pm - 2:30 pm</th>
</tr>
<tr>
<th>Monday</th>
<td>BLaw</td>
<td>Web Technology</td>
<td>CostAccounting</td>
<td rowspan="6" align="center">b <br> r <br> e <br>a <br>k <br></td>
<td>Indian Economy</td>
<td>Excel</td>
</tr>
<tr>
<th>Tuesday</th>
<td>BLaw</td>
<td>Excel</td>
</tr>
<tr>
<th>Wednesday</th>
<td>BLaw</td>
<td>Excel</td>
</tr>
<tr>
<th>Thursday</th>
<td>BLaw</td>
<td>Excel</td>
</tr>
<tr>
<th>Friday</th>
<td>BLaw</td>
<td>Excel</td>
</tr>
<tr>
<th>Saturday</th>
<td>BLaw</td>
<td>Excel</td>
</tr>
</table>
</body>
</html>
3.Create a webpage which accepts user inputs as shown below.
<html>
<head>
<title>Text Boxes</title>
</head>
<body> <form ><center>Name: <input type="text" size="20" maxlength="30"><br> <br>
Address: <input type="text" size="20" maxlength="30"><br> <br>
State: <input type="text" size="20" maxlength="30"><br><br>
City: <input type="text" size="20" maxlength="30"><br><br>
Pincode: <input type="text" size="20" maxlength="30"><br><br>
<input type="submit" value="place your order">
</center>
</form>
</body>
</html>
4. Create a webpage to modify the default properties of h1 tag using internal tags.
<html>
<head>
<title>Inline</title>
</head>
<body> <h1 style="color: red; text-decoration: overline;">
E-commerce </h1> <br><br>
<h2>It deals with buying and selling of goods and services through online marketing</h2>
<br><br>
<h1>It grows very fastly now a days</h1>
</body>
</html>
5. Create a webpage to display an ordered list of courses offered in you college.
<html>
<head>
<title>List</title>
</head>
<body bgcolor="red">
List of courses
<ol type="1"> <br>
<li>UG courses</li>
<ul>
<li>Bcom</li>
<li>Bsc</li>
<li>BBA</li>
</ul> <br>
<li>PG Courses</li>
<dl>
<dt>MCA</dt>
<dd>Master of computer applications</dd> <br>

<dt>MBA</dt>
<dd>Master of business administration</dd> <br>
</dl>
</ol>
</body>
</html>
6. Create a webpage to display a table with 2rows and 2 columnsnand also insert image in the cells
of the table.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="5" align="center">
<caption>text and image</caption><br><br>
<tr>
<td><img src="star 1.jpeg"></td>
<td>This image shows a star image</td>
</tr>
<tr>
<td>This image shows a triangle in oval shape</td>
<td><img src="triangle.jpeg" alt=""></td>
</tr>
</table>
</body>
</html>
7.Create a webpage to display a hyperlink which when clicked directs you to amazon website.
<html>
<head>
<title>table</title>
</head>
<body>this page demonstrate hyperlinks <br>
click here on below to go to amazon website <br>
<a href="https:www.amazon.in" target="_blank">Amazon</a> <br>
The above link will navigate to amazon website.
</body>
</html>
8.Create a webpage to demonstrate various marquee effects over a given text.
<html>
<head>
<title>html marquee</title>
</head>
<body><h1><marquee>this is a basic example of marquee</marquee>
<marquee ="alternate" direction="up"> web technology</marquee></h1>
</body>
</html>
9.Create a webpage to display the following output.
<html>
<head>
<title>table</title>
</head>
<body>
<center>
<table border="2" align="center">
<tr>
<td colspan="2" align="center"> Title</td>
</tr>
<tr>
<td>This image shows a star image</td>
<td><img src="star 1.jpeg" alt=""></td>
</tr>
</table>
</center>
</table>
</body>
</html>
10. CREATE A WEBPAGE FOR FOLLOWING O/P
a+b=a2 +2ab+b2
<html>
<head>
<title>Formatting Tags</title>
</head>
<body>This page will show formatting tags(subscript and super script) <br><br>
a+b <sup> 2</sup>= a <sup>2</sup>+2ab+b <sup>2</sup> <br><br>
H <sub>2</sub>SO <sub>4</sub> <br><br>
</body>
</html>
11.Create a webpage for demonstrate the usage of nested tables as shown in the diagram below.
<html>
<head>
<title>Table tag</title>
</head>
<body>
<table border="5" align="center" cellspacing="5" cellpadding="5">
<caption>Fruits names</caption>
<br><br>
<tr><td><table border="3"><tr><td>Mango</td><td>Banana</td></tr>
<tr><td>Orange</td><td>Apple</td></tr></table></td>
<td><table
border="3"><tr><td>Grapes</td><td>Watermelon</td></tr><td>Muskmelon</td><td>Cherry</td>
</table></td>
</tr>
</table>
</body>
</html>
12.Create a webpage which acts as a homepage where your college name is properly aligned with
the logo of your college followed by address and contact details at the centre of page.
<html>
<head>
<title>College</title>
</head>
<body><center><u>homepage</u>
<h2>Megha degree college</h2>
<img src="logo23.png" height="100" width="100">
<h3>Address:Ramanthapur <br>near pragathinagar</h3></center>
</body>
</html>
13.Create a webpage of application of commerce using dl.
<html>
<head>
<title>Applications of ecommerce</title>
</head>
<body bgcolor="yellow">
<dl>
<dt><b>1.E-marketing</b> </dt>
<dd>Internet marketing also reffered to as web marketing ,online marketing,emarketing, is the

marketing of products or services over the internet.</dd>
<dt><b>2.E-Advertisement</b> </dt>
<dd>Online advertising is a form of promotion that uses the internet and world wide web for
purpose of delivering market messages to attract customers.</dd>
<dt><b>3.E-Banking</b> </dt>
<dd>E-banking allows customers to conduct financial transactions on secure website operated

by their retails or virtual bank.</dd>
<dt><b>4.Mobile commerce</b> </dt>
<dd>Mobile commerce is the use of information technologies of communication technologies

for purpose of mobile integration of different value chains on business processes and for purpose of
management business relationships.</dd>
<dt><b>5.Online trading</b> </dt>
<dd>Online trading is the acr or practice of buying & selling securities over the
internet.Generally speaking ,online trading occur when an invester makes an order to a broker
online ,the broker then executes the order.</dd>
<dt><b>6.E-Learning</b> </dt>
<dd>It is commonly reffered to the intentional use of networked information & communications
technology in teaching and learning. </dd>
<dt><b>7.E-Shopping</b></dt>
<dd>E-Shopping or online shopping is the process whereby consumers directly buy goods or
services from a seller in real time without an intermediary service over the internet.</dd>
</dl>
</body>
</html>
14.Create a webpage to display a bullet list of subjects available in the current semester.
<html>
<head>
<title>list</title>
</head>
<body bgcolor="red"> list of subjects <br>

<ul>
<li>regulation of insurance business</li>
<li>sectors of indian economy</li>
<li>rdbms</li>
<li>company law</li>
<li>ecommerce</li>
<li>gst
<li> management accounting</li>
</li>
</ul>
</body>
</html>
15. Create a webpage to give scrolling effect(preferably ur college logo)
<html>
<head>
<title>html marquee tag</title>
</head>
<body><h1><marquee> this is basic example of marquee</marquee></h1><br>
<marquee behavior="alternate" direction="down"><img src="logo23.png" height="150"

width="150" ></marquee>
</body>
</html>
16.Create a webpage to display a button which one when clicked directs to your college website.
<html>
<head>
<title>megha womens degree college</title>
</head>
<body><br><br>
<center> <u>this button is redirect to college website</u></center><br><br><br>

<a href="http://meghawomensdegreecollege.com"><input type="button" value="click"></a>
</body>
</html>
17.Create a website to display various courses in your college ,the course should be separated by
horizontal rural of wearing sizes and colour.
<html>
<head>
<title>Style hr tags</title>
<style>
hr.new1{
border-top: 1px solid red ;
hr.new2{
border-top: 1px dashed red ;
}
hr.new3{
border-top: 1px dotted red ;
hr.new4{
border-top: 1px solid red ;
hr.new5{
border-top: 10px solid green ; border-radius: 5px;
</style>
</head>
<body>
<center>
<h2>style hr tags</h2>
<hr>
<h1>different courses of college</h1>
</center>
<hr class="new1 ">
B.COM General
<hr class="new2">
B.Com Computers
<hr class="new3">
B.Com Computers Application
<hr class="new4">
BSc Physical sciences

<hr class="new5">
Bsc Statistics
</body>
</html>
18.Create a webpage to display 4 vertical frames each frame containing a different colour.
Step 1:
<html>
<head>
<title>frame</title>
</head>
<body bgcolor="green"> <h1>this is first frame</h1>
</body>
</html>
Step2:
<html>
<head>
</head>
<body bgcolor="pink"><h1>this is fourth frame</h1>
</body>
</html>
Step3:
<html>
<head>
</head>
<body bgcolor="blue"> <h1>this is third frame</h1>
</body>
</html>
Step4:
<html>
<head>
</head>
<body bgcolor="red"><h1>this is second frame</h1>
</body>
</html>
Final step:
<html>
<head>
<title>vertical frame</title>
</head>
<frameset cols="25% ,25% ,25% ,25%">
<frame src="step1.html">
</frameset>
</html>
19.Create a webpage to display 4 horizontal frames each frames containing different colours.
Step 1:
<html>
<head>
</head>
<body bgcolor="green"> <h1>this is first frame</h1>
</body>
</html>
Step2:
<html>
<head>
</head>
<body bgcolor="pink"><h1>this is fourth frame</h1>
</body>
</html>
Step3:
<html>
<head>
</head>
<body bgcolor="blue"> <h1>this is third frame</h1>
</body>
</html>
Step4:
<html>
<head>
</head>
<body bgcolor="red"><h1>this is second frame</h1>
</body>
</html>
Final step:
<html>
<head>
<title>horizontal frame</title>
</head>
<frameset rows="25% ,25% ,25% ,25%">
</frameset>
</html>
20.Create a webpage to display table containing 2 rows and 2 columns which contains the names
of your friends and each cell fill with different background colour.
<html>
<head>
<title>table with rows and columns</title>
</head>
<body>
<table border="5" align="center" height="250" cellspacing="10" cellpadding="5" >
<caption>Friends names</caption><br><br>
<tr><td bgcolor="red " align="center">Swetha</td>
<td bgcolor="blue" align="center">Shaniya</td></tr>
<tr><td bgcolor="green" align="center">Swapna</td>
<td bgcolor="pink" align="center">Priyanka</td></tr>
</table>
</body>
</html>
21.Create a webpage which ask for mode of payment which includes the options-credit card\debit
card\online transfer using radio buttons.
<html>
<head>
<title>Form</title>
</head>
<body>
<br><br><br>
<center> <u> <h1>Modes of payments</h1></u></center>
<br><br><br>
<form> Select the mode of payments
<br>
<input type="radio" name="r1">Credit card
<br>
<input type="radio" name="r2"> Debit card
<br>
<input type="radio" name="r3"> Online tranfer
</form>
</body>
</html>
22.Create a webpage which asks the user to enter his credit card details .use text boxes drop down
bottons.
<html>
<head>
<title>Forms</title>
</head>
<body><pre> <br> <center><u><h2>Credit card details</h2></u></center>
<br>
<form> enter card type: <select name="s1" >

<option></option>
<option>Rupay card</option>
<option>Master card</option>
<option>Visa card</option>
</select>
<br>
Card number: <input type="text" name="t1" size="16" maxlength="20">
<br>
Expiry date(mm\yyyy): <input type="text" name="t2" maxlength="20">
<br>
CVV: <input type="Password" name="t3" size="3" maxlength="3">
<br>
Name of card: <input type="text " name="t1" size="16" maxlength="20">
<br>
<input type="submit" value="submit">
<input type="reset" value="clear">
</form>
</pre>
</body>
</html>
23. Create a webpage to generate a purchase order as shown below.
<html>
<head>
</head>
<body>
<pre><br><center><u><h2>Purchase orders</h2></u></center><br>
<form> Name: <input type="text" name="t1" size="20" maxlength="20">
Address: <input type="text" name="t2" size="20" maxlength="20">
State: <input type="text" name="t3" size="20" maxlength="20">
City: <input type="text" name="t4" size="20" maxlength="20">
Pincode: <input type="text" name="t5" size="20" maxlength="20">
Magazine: <select name="S1">
<option> Computers today</option>
<option> IT Trends</option>
<option> Artificial intelligence</option>

</select><br>
Subscription: <input type="radio">1yr

<input type="radio">2yrs
<br>
<input type="submit">
</form></pre>
</body>
</html>
24.Create a webpage to display a hyperlink which when clicked display excel sheet
<html>
<head>
<title>Excel sheet</title>
</head>
<body>
<a href="https://office.live.com/start/excel.aspx">open excel</a>

</body>
</html>
25.Create a webpage to display definition list which defines the terms -B2b,B2C,C2B,C2C.
<html>
<head>
<title>Types of E-Commerce</title>
</head>
<body bgcolor="Pink">
<dl>
<DT>B2B:</DT>
<DD>Website following B2B business model sells its products to
an intermediate buyer who then sells the product to the final customer.</DD>
<dt>B2C:</dt>
<dd>Website following B2C business model sells its products directly to a customer.</dd>
<dt>C2B:</dt>
<dd>In this model,a customer approaches website showing multiple business
organisations for a particular service.</dd>

<dt>C2C:</dt>
<dd>Website following C2C business model helps consumer to sell their assets like residential
property,cars , motercycles etc or rent a room by publishing their information on a

website.
</dd>
</dl>
</body>
</html>
26.Create a webpage which displays four buttons containing text B2B,B2c,C2b,C2c.Also when a
button is clicked details about the clicked subjects should display on separate page.
Step 1:
< html>
<head>
<title> ECOMMERCE</title>
</head>
<body>
<center><u>Types of Ecommerce</u></center>
<dl><dt>B2B</dt></dl>
<dd>Business to business is a situation where one business makes a commercial
transaction with another
</dd><br>
</body>
</html>
Step 2:
<html>
<head>
<title>ECOMMERCE</title>
</head>
<body><center><u>Types of Ecommerce</u></center>
<dl><dt>B2C</dt></dl>
<dd> The business to consusmer type of ecommerce is distinguished by
the establishment of electronic business relationshis between businesses
and final consumers
</dd>
<br>
</body>
</html>
Step 3:
<html>
<head>
</head>
<body><Center><U>Types of Ecommerce</U></Center>
<dl><dt>C2B</dt><dl>
<dd>In C2B there is a complete reversal of the traditional sense of exchanging goods.
This type of ecommerce is very common in crowdsourcing based projects.
</dd>
<br>
</body>
</html>
Step 4:
< html>
<head>
</head>
<body><Center><U>Types of Ecommerce</U></Center>
<dl><dt>C2C</dt></dl>
<dd>Consumer to Consumer type of ecommerce encompasses transactions of goods
or services conducted between consumers.
</dd>
<br>
</body>
</html>
Final step:
<html>
<head>
</head>
<body>
<br><br><br>
<a href="26B2b.html"><input type="button" name="button" value="B2B"></a>

<br><br>
<a href="26b2c.html"><input type="button" name="button" value="B2C"></a>
<br><br>
<a href="26c2b.html"><input type="button" name="button" value="C2B"></a>
<br><br>
<a href="26C2c.html"><input type="button" name="button" value="C2C"></a>
<br>
</body>
</html>
27.Create a webpage to modify the default properties of h1 tag external style sheet.
Step 1:Stylesheet.css
h1{
color: red;
background-color: yellow;
p{
text-transform: uppercase;
Step 2:
<html>
<head>
<title>External</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Best degree college</h1>

<p>located in Hyderabad</p>
<h1>Affiliated to OU</h1>
</body>
</html>
28.Create a webpage to scroll the text “Ecommerce” for exactly 5 times from left to right of the
screen.
<html>
<head>
<title>Marquee</title>
</head>
<body>
<br><br><br>
<center><u>Scrolling text</u></center>
<Marquee style="color: red; background-color: yellow;" scrollamount="5" loop=5

>Ecommerce</Marquee>
</body>
</html>
29.Create a webpage to insert an image which when clicked is redirected you to your college
website.
< html>
<head>
</head>
<body>
<br><br><br>
<center><u>Click on the image to redirect to college website
</u></center>
<br><br><br>
<a href="http://www.meghawomensdegreecollege.com/"> <img src="logo23.png" height="100"

width="100" ></a>
</body>
</html>
30.Create a webpage to display the name of your college in H6 size with blue as font colour and
background colour yellow separated by a thick line and below which a paragraph about the
facilities offered by your college is described.
<html>
<head>
</head>
<body>
<br><br><br>
<center><u><h6 style="border: 10px solid green;"> Megha Womens degree college
</h6></u></center>
<p>facilities of college</p>
<ol type="1">
<li>Experience faculty</li>
<li>placements</li>
<li>clean and green premises</li>
<li>lab and library facility</li>
</ol>
</body>
</html>
31.Create a webpage with Osmania University as the title and 5 buttons lablled as home,about
us,courses,feedback and contact us as shown in the diagram which when clicked display details
on a separate page.
Step 1: Homepage
<html>
<head>
<title>form</title>
</head>
<body>
<h1>This is a homepage</h1>
<a href="31final.html"> back </a>
</body>
</html>
Step 2:About us
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>This is About us page</h1>
<br>
<a href="31final.html"> back </a>
</body>
</html>
Step 3: Courses
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>This is Courses page</h1>
<br>
<a href="31final.html">back</a>
</body>
</html>
Step 4: Feedback
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>This is feedback page</h1>
</body>
</html>
Step 5: Contact us
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>This is Contact Us page </h1>
</body>
</html>
Final step:
<html>
<head>
<title>Form</title>
</head>
<body>
<br><br><br>
<center><h2>Osmania University</h2>
<br>
<h4>Telangana University</h4> </center>
<br><br><br>
<a href="31homepage.html" ><input type="button" value="Homepage" >   </a>
<a href="31aboutus.html" ><input type="button" value="About Us" >   </a>
<a href="31course.html" ><input type="button" value="Courses" >   </a>
<a href="31feedback.html" ><input type="button" value="Feedback" >   </a>
<a href="31contactus.html" ><input type="button" value="Contact Us" ></a>
</body>
</html>
32.Create a webpage to demonstrate a pull down menu. The menu should contain list of your
favourite south indian dishes.
< html>
<head>
<title>Select Menu</title>
</head>
<body bgcolor="Pink">List of Favourite South Indian Foods<select name="dropdown" >
<option value="List">Dosa</option>
<option value="List">Chicken Biryani</option>
<option value="List">Idli Sambar</option>
<option value="list">Vada chutni</option>
<option value="list">Special Masal Dosa</option>
<option value="list">Onion paneer Dosa</option>
<option value="list">Butter Masala Dosa</option>
<option value="list ">Egg Fried Rice</option>
<option value="list">Veg Gravy</option>
<option value="list">Egg Biryani</option>

<option value="list">Veg Pulao</option>
</select>
</body>
</html>
33.

Programs HTML

Uploaded by

Copyright:

Available Formats

You might also like

Programs HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programs HTML

Uploaded by

Copyright:

Available Formats

1. Create a webpage to display the following output(use text box,submit button).

Name : <input type="text" maxlength="25" size="30"><br><br>

Address : <input type="text" size="30" maxlength="25"><br><br>

2.Create a webpage to display the timetable of your class using table.

<table align="center" border="2">

<th>9:00 am - 10:00 am</th>

<th>10:00 am - 11:00 am</th>

<th>11:00 am - 12:00 noon</th>

<th>12:00 noon - 12:30 pm</th>

<th>12:30 pm - 1:30 pm</th>

<th>1:30 pm - 2:30 pm</th>

<td rowspan="6" align="center">b <br> r <br> e <br>a <br>k <br></td>

3.Create a webpage which accepts user inputs as shown below.

<body> <form ><center>Name: <input type="text" size="20" maxlength="30"><br> <br>

Address: <input type="text" size="20" maxlength="30"><br> <br>

State: <input type="text" size="20" maxlength="30"><br><br>

City: <input type="text" size="20" maxlength="30"><br><br>

Pincode: <input type="text" size="20" maxlength="30"><br><br>

<input type="submit" value="place your order">

<body> <h1 style="color: red; text-decoration: overline;">

E-commerce </h1> <br><br>

<h1>It grows very fastly now a days</h1>

<ol type="1"> <br>

<dd>Master of computer applications</dd> <br>

<dd>Master of business administration</dd> <br>

<table border="5" align="center">

<caption>text and image</caption><br><br>

<td><img src="star 1.jpeg"></td>

<td>This image shows a star image</td>

<td>This image shows a triangle in oval shape</td>

<td><img src="triangle.jpeg" alt=""></td>

<body>this page demonstrate hyperlinks <br>

click here on below to go to amazon website <br>

<a href="https:www.amazon.in" target="_blank">Amazon</a> <br>

The above link will navigate to amazon website.

<body><h1><marquee>this is a basic example of marquee</marquee>

<marquee ="alternate" direction="up"> web technology</marquee></h1>

<table border="2" align="center">

<td colspan="2" align="center"> Title</td>

<td>This image shows a star image</td>

<td><img src="star 1.jpeg" alt=""></td>

a+b <sup> 2</sup>= a <sup>2</sup>+2ab+b <sup>2</sup> <br><br>

H <sub>2</sub>SO <sub>4</sub> <br><br>

<table border="5" align="center" cellspacing="5" cellpadding="5">

<h2>Megha degree college</h2>

<img src="logo23.png" height="100" width="100">

<h3>Address:Ramanthapur <br>near pragathinagar</h3></center>

<dd>Internet marketing also reffered to as web marketing ,online marketing,emarketing, is the

<dd>E-banking allows customers to conduct financial transactions on secure website operated

<dt><b>4.Mobile commerce</b> </dt>

<dd>Mobile commerce is the use of information technologies of communication technologies

<body bgcolor="red"> list of subjects <br>

<li>regulation of insurance business</li>

<li>sectors of indian economy</li>

<li> management accounting</li>

15. Create a webpage to give scrolling effect(preferably ur college logo)

<body><h1><marquee> this is basic example of marquee</marquee></h1><br>

<input type="submit" value="submit">

Subscription: <input type="radio">1yr