Scribd
Upload
17 views

HTML Programs-1

The document contains code for creating an insurance registration form using HTML and CSS. The form includes fields for collecting customer name, father's name, address, gender, city, course, district, state, pincode, email, date of birth, and mobile number. The form uses input fields like text, radio buttons, select dropdowns for collecting the information. There are also labels defined for each field to identify the information requested.

Uploaded by

swetha.p.bcom1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

HTML Programs-1

The document contains code for creating an insurance registration form using HTML and CSS. The form includes fields for collecting customer name, father's name, address, gender, city, course, district, state, pincode, email, date of birth, and mobile number. The form uses input fields like text, radio buttons, select dropdowns for collecting the information. There are also labels defined for each field to identify the information requested.

Uploaded by

swetha.p.bcom1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

1.

Designing a Simple Website using HTML


<html>
<head><title> <CA> </title></head>
<body>
<center> <h1><b1> DEPARTMENT OF COMMERCE WITH COMPUTER
APPLICATION </b> <h1> </center>
<center> <h2> SNR SONS COLLEGE(AUTONOMOUS) COIMBATORE - 06
<h2> </center>
<center> <img src= "C:\Users\Public\Pictures\Sample Pictures\snr.jpg"width"="1100"
height="400" />
</center>
<hr>
<p> </P> To Know more about the Department click the following links...<hr>
<a href= "about.html"> About us </a>
<br>
<a href="job.html "> Job Opportunities in the feild of commerce with computer application
<a>
<br>
</body>
</html>
OUTPUT:
2 .Creation of tables with Attributes

<html>
<head>
<title>Top Cities in TN</title>
<body>
<table border="1">
<tr>
<th>Team</th>
<th>Ranking</th>
</tr>
<tr>
<td>CHENNAI</td>
<td>1</td>
</tr>
<tr>
<td>COIMBATORE</td>
<td>2</td>
</tr>
<tr>
<td>TRICHY</td>
<td>3</td>
</tr>
</table>
</body>
</html>

OUTPUT
3.Creating of ordered list and unordered list
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list whose type = "A"</h1>
<ol type="A">
<li>Sachin</li>
<li>Manoj</li>

</ol>
<h1>Example of reverse ordered list</h1>
<ol reversed>
<li>Parth</li>
<li>sujay</li>
</ol>
<h1>Example of ordered list start from 10</h1>
<ol start = "10">
<li>Pushpa</li>
<li>Purvi</li>
</ol>

</body>
</html>

Output:
Unordered list

<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>Example of unordered list in default</h1>
<ul>
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ul>
</body>
</html>

Output
4.Creating E.Advertisment
<html>
<head>
<title> advertisement </title>
</head>
<body>
<center> <h1> <b> Gionee Gp Ad G5
</b> </h1> </center>
<center> <img src="C:\Users\Public\Pictures\Sample Pictures\snr.jpg"height="300"
width="300"/> </center>
<ul>
<li> Attractive color </li>
<li> GSM/HSPA Technology </li>
<li> 13.97 cm Hd ISP Display </li>
<li> 2mp front camera and 8MP AF Roar camera </li>
<li> android OS </li>
<li> 8GB Internal memory </li>
<li> Price Rs.14,999 </li>
</ul>
</body>
</html>
OUTPUT:

• Attractive color

• GSM/HSPA Technology 13.97 cm Hd ISP Display

• 2mp front camera and 8MP AF Roar camera

• android OS

• 8GB Internal memory

• Price Rs.14,999
5. Creation of Scrolling Text using Marquee tag
<html>
<head>
<title>Marquee tag</title>
</head>
<body>
<marquee direction="right">Scrolling right</marquee>
<marquee direction="left">Scrolling left</marquee>
<marquee direction="down">Scrolling down</marquee>
<marquee direction="up">Scrolling up</marquee>
<marquee behavior="slide"><img src="2.jpg" width="100"></marquee>
<marquee behavior="alternate" scrollamount="20"><img src="4.jpg"
width="100"></marquee>
</body>
</html>
Output:
6. Customizing product catalogue
<html>
<head>
<div>
<table width ="600" align= "center" "center" cell Padding="cellspacing="0" bg
color="FFFCC"
<tl>
<td>
<h1>FAIRNESS CREAM </h1>
<p> you are biddng on a [used or new ] FAIRNESS CREAM ]. [CONDITION
DESCRIPTION]. [ITEMS INCLUDED] </p>
<h3> image:</h3>
<p align="center"> <img src ="C:\Users\student\Pictures\index3.jpg"width="500"
height="375"/> </p>
<p align= "center"> <img src="C:\Users\student\Pictures\index.jpg"width="500"
height="375" /> </p>
<p align="center"> <img src="C:\Users\Public\Pictures\Sample
Pictures\Tulips.jpg"width="500" height="375"/> </p>
<h3> DESCRIPTION:</h3>
<ul>
<li> It's Eco-Friendly. </li>
<li> It does not cause any pollution your skin.</li>
<li> It is made up of Tulips leaves and roots </li>
</ul>
<h3> shipping and payment </h3>
<ul>
<li> shipping to us only </li>
<li>[HOE LONG IT TAKES TO SHIP </li>
<li> [ACCEPTED PAYMENT PROCESSORS] </li>
</ul>
<h3> additional info: </h3>
<p>[disclaimer] </p>
<p> <?p>
</td>
</table>
</dis>
</head>
</html>
Output:
7. Managing Shopping Cart
<html>
<h1>Shopping Cart</h1>
<div class="shopping-cart">
<div class="column-labels">
<label class="product-image">Image</label>
<label class="product-details">Product</label>
<label class="product-price">Price</label>
<label class="product-quantity">Quantity</label>
<label class="product-removal">Remove</label>
<label class="product-line-price">Total</label>
</div>
<div class="product">
<div class="product-image">
<img src="https://s.cdpn.io/3/dingo-dog-bones.jpg">
</div>
<div class="product-details">
<div class="product-title">Dingo Dog Bones</div>
<p class="product-description">The best dog bones of all time. Holy crap. Your dog will
be begging for these things! I got curious once and ate one myself. I'm a fan.</p>
</div>
<div class="product-price">12.99</div>
<div class="product-quantity">
<input type="number" value="2" min="1">
</div>
<div class="product-removal">
<button class="remove-product">
Remove
</button>
</div>
<div class="product-line-price">25.98</div>
</div>
<div class="product">
<div class="product-image">
<img src="https://s.cdpn.io/3/large-
NutroNaturalChoiceAdultLambMealandRiceDryDogFood.png">
</div>
<div class="product-details">
<div class="product-title">Nutro™ Adult Lamb and Rice Dog Food</div>
<p class="product-description">Who doesn't like lamb and rice? We've all hit the halal
cart at 3am while quasi-blackout after a night of binge drinking in Manhattan. Now it's your
dog's turn!</p>
</div>
<div class="product-price">45.99</div>
<div class="product-quantity">
<input type="number" value="1" min="1">
</div>
<div class="product-removal">
<button class="remove-product">
</button>
</div>
<div class="product-line-price">45.99</div>
</div>

<div class="totals">
<div class="totals-item">
<label>Subtotal</label>
<div class="totals-value" id="cart-subtotal">71.97</div>
</div>
<div class="totals-item">
<label>Tax (5%)</label>
<div class="totals-value" id="cart-tax">3.60</div>
</div>
<div class="totals-item">
<label>Shipping</label>
<div class="totals-value" id="cart-shipping">15.00</div>
</div>
<div class="totals-item totals-item-total">
<label>Grand Total</label>
<div class="totals-value" id="cart-total">90.57</div>
</div>
</div>
<button class="checkout">Checkout</button>
</div>
</html>

Output
8. Creating a registration form with Validation
<html>
<head>
<meta charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form>
Name : <input type="text" name="uname" required="required" /><br />
phone no: <input type="tel" name="phno" required="required" /><br />
E-mail: <input type="email" name="email" required="required" /><br />
Website: <input type="url" name="site" required="required" /><br />
Date: <input type="date" name="dob" required="required" /><br />
Time: <input type="time" name="t1" required="required" /><br />
City:<input list="city">
<datalist id="city">
<option value="-Select">
<option value="Hyderabad">
<option value="Mumbai">
<option value="Islamabad">
</datalist>
<br><input type="submit" value="Register" />
</form>
</body>
</html>
Output :

Name :
phone no:
E-mail:
Website:
Date:
Time: City:
Register
9. Create a Insurance Registration form using HTML and CSS
<html>
<body>
<tbody><tr>
<td colspan="2"><center><font size="4"><b>insurance registraton</b></font></center>
</td>
</tr>
<br>
<tr>
<td>customer name</td>
<td><input type="text"name="customer name"id="customer
name"size="30"placeholder="customername"></td>
</tr>
<br>
<tr>
<td>father name</td>
<td><input type="text"name="fathername"id="fathername"size="30"placholders="fathers
name"></td>
</tr>
<br>
<tr>
<td>postal address</td>
<td><input
type="text"name="paddress"id="paddress"size="30"placholders="paddress"></td>
</tr>
<br>
<tr>
<td>personal address</td>
<td><input type="text"name="personal
address"id="personaladdress"size="30"placholders="personal address"></td>
</tr>
<tr>
<br>
<tr>
<td>gender</td>
<br>
<td>
<input type="radio"name="sex" value="male" size="10">male
<input type="radio"name="sex" value="female" size="10">female
<td>
</tr>
<br>
<tr>
<td>City</td>
<td>
<select name="city">
<option value="-1"selected="">select..</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="PATNA">PATNA</option>
</select></td>
</tr>
<br>
<tr>
<td>course</td>
<td>
<select name="course">
<option value="-1"selected="">select..</option>
<option value="Deposit insurance">Deposit insurance</option>
<option value="self insurance">self insurance</option>
<option value="Travel insurance">travel insurance</option>
</select></td>
</tr>
<br>
<tr>
<td>District</td>
<td><select name="district">
<option value="-1"selected=''>select</option>
<option value="Nalanda">NALANDA</option>
<option value="self insurance">self insurance</option>
<option value="up">UP</option>
<option value="GOA">GOA</option>
<option value="PATNA">PATNA</option>
</select></td>
</tr>
<tr>
<td>state</td>
<td><select name="district">
<option value="-1"selected=''>select</option>
<option value="New Delhi">New delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="up">UP</option>
<option value="GOA">GOA</option>
<option value="bihar">Bihar</option>
</select></td>
</br>
</tr>
<br>
<tr>
<td>pincode</td>
<td><input type="text" name="pincode" id="pincode"
size="30"placeholder="pincode"></td></tr>
<br>
<tr>
<td>email</td>
<td><input type="text" name="E-mail" id="E-mail" size="30"placeholder="E-
mail"></td></tr>
<br>
<tr>
<td>DOB</td>
<td><input type="text" name="DOB" id="dob" size="30"placeholder="dob"></td></tr>
<br>
<tr>
<td>mobile no</td>
<td><input type="text" name="mobile no" id="mobile no" size="30"placeholder="mobile
no"></td></tr>
<br>
<button type="submit">submit</button>
<button type="reset"value="Reset">Reset</button>
<br></tbody>
</body>
</html>
OUTPUT:
10 Design an E-Voucher for Banking
<html>
<body>
<body><tr>
<td colspan="2"><center><b>ONLINE SBI REGISTRATION FORM</b></center>
</td>
</tr>
<br>
<tr>
<td>
<td>To</td>
<br>
<td>The Branch Manager</td>
<br>
<td>State Bank of India</td>
<P>I Wish to register as a user of `OnlineSBI`,SBI Internet Banking service</p>
<td> Name of customer </td>
<td><input type ="text"name="name of customer"id="name of
customer"size="30"placeholder="name of customer"></td>
</tr>
<br>
<tr>
<td>Mobile numbe</td>
<td><input type ="text"name="mobile number"id="mobile
number"size="30"placeholder="mobile number"></td>
</tr>
<br>
<tr>
<td>E Mail</td>
<td><input type ="text"name="e mail"id="e mail"size="30"placeholder="e mail"></td>
</tr>
<br>
<tr>
<td>Date of Birth</td>
<td><input type ="text"name="date of birth"id="date of birth"size="30"placeholder="date of
birth"></td>
</tr>
<br>
<td>My Account Number</td>
<br>
<td>Single Joint Account</td>
<br>
<td>Transaction Rights </td>
<br>
<td>Limited Transaction Rights</td>
<p>I have read the provision contain in the" terms of service (terms and conditions)document
"of "online SBI" and accept them
<br>
<td> customer signature</td>
<br>
<td>Date</td>
</body>
</html>
OUTPUT:

You might also like