[go: up one dir, main page]
Scribd
Upload
25 views44 pages

FullStack Lab

Uploaded by

Ram Dhighash

The document contains instructions for HTML exercises including formatting text, images, and lists. It provides sample code to print the squares of numbers 1-20, two lists (ordered and unordered), a list starting with 7, a heading with a horizontal line, a definition list with 5 items, two addresses, acronyms and abbreviations, five images with titles and spacing, an image with borders and fixed size, and an image floated to the right side. It also provides code to create a nested ordered list and definition list to illustrate the list tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

FullStack Lab

Uploaded by

Ram Dhighash
25 views44 pages
The document contains instructions for HTML exercises including formatting text, images, and lists. It provides sample code to print the squares of numbers 1-20, two lists (ordered and unordered), a list starting with 7, a heading with a horizontal line, a definition list with 5 items, two addresses, acronyms and abbreviations, five images with titles and spacing, an image with borders and fixed size, and an image floated to the right side. It also provides code to create a nested ordered list and definition list to illustrate the list tags.

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

The document contains instructions for HTML exercises including formatting text, images, and lists. It provides sample code to print the squares of numbers 1-20, two lists (ordered and unordered), a list starting with 7, a heading with a horizontal line, a definition list with 5 items, two addresses, acronyms and abbreviations, five images with titles and spacing, an image with borders and fixed size, and an image floated to the right side. It also provides code to create a nested ordered list and definition list to illustrate the list tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
25 views44 pages

FullStack Lab

Uploaded by

Ram Dhighash
The document contains instructions for HTML exercises including formatting text, images, and lists. It provides sample code to print the squares of numbers 1-20, two lists (ordered and unordered), a list starting with 7, a heading with a horizontal line, a definition list with 5 items, two addresses, acronyms and abbreviations, five images with titles and spacing, an image with borders and fixed size, and an image floated to the right side. It also provides code to create a nested ordered list and definition list to illustrate the list tags.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 44

School of Computer Science Engineering and Information Systems

WINTER SEMESTER 2023-2024


PMCA601P – FULL STACK WEB DEVELOPMENT LAB
Slot: L45+L46 & L29+L30
Faculty Name(s): Prof.K.Sumangali Date: 10-01-2024

HTML Exercises

1. HTML Text Formatting

a) Print the squares of the numbers 1 - 20. Each number should be


on a separate line, next to it the number 2 superscripted, an equal
sign and the result.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Square of 1-20</title>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<h3>23MCA0187</h3>
<h2>Square of numbers 1-20</h2>
<p>1<sup>2</sup> = 1</p>
<p>2<sup>2</sup> = 4</p>
<p>3<sup>2</sup> = 9</p>
<p>4<sup>2</sup> = 16</p>
<p>5<sup>2</sup> = 25</p>
<p>6<sup>2</sup> = 36</p>
<p>7<sup>2</sup> = 49</p>
<p>8<sup>2</sup> = 64</p>
<p>9<sup>2</sup> = 81</p>
<p>10<sup>2</sup> =100</p>
<p>11<sup>2</sup> = 121</p>
<p>12<sup>2</sup> = 144</p>
<p>13<sup>2</sup> = 169</p>
<p>14<sup>2</sup> = 196</p>
<p>15<sup>2</sup> = 225</p>
<p>16<sup>2</sup> = 256</p>
<p>17<sup>2</sup> = 289</p>
<p>18<sup>2</sup> = 324</p>
<p>19<sup>2</sup> = 361</p>
<p>20<sup>2</sup> = 400</p>
</body>
</html>

Output:
b) Print two lists with any information you want. One list should be
an ordered list, the other list should be an unordered list

Program:

<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<h3>23MCA0187</h3>
<list>
<ol>
<li><b>Countries</b>
<ol type="I">
<li>India</li>
<li>USA</li>
<li>Mexico</li>
<li>Sri Lanka</li>
</ol>
</li>
<li><b>Continents</b>
<ul type="disc">
<li>Asia</li>
<li>Antarctica</li>
<li>North America</li>
<li>Europe</li>
</ul>
</li>
</ol>
</list>
</body>
</html>
Output:

c) Print a list which starts with 7 with the type i.

Program:

<!DOCTYPE html>
<html>
<body>
<h3>NAVEEN KUMAR B</h3>
<list>
<li>Headings
<ol type="i" start="7">
<li>Fruits</li>
<li>Vegetables</li>
<li>Books</li>
</ol>
</li>
</list>
</body>
</html>
Output:

d) 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.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line</title>
</head>
<body width="100%">
<h3>NAVEEN KUMAR B</h3>
<h1>Cricket</h1>
<hr>
<p>It is a sport played all over the World and is internationally
recognized. It is also my favourite sport.</p>
</body>
</html>

Output:
e) Print a definition list with 5 items.

Program:

<!DOCTYPE html>
<html>
<head>
<title>
Definition list
</title>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<dl>
<dt>Milk</dt>
<dd>- Good for health</dd>
<dt>Water</dt>
<dd>-Needed for survival</dd>
<dt>Potato</dt>
<dd>-One of the most important vegetables</dd>
<dt>India</dt>
<dd>-Most diverse Country in the world</dd>
<dt>Cricket</dt>
<dd>-My favourite Sport</dd>
</dl>
</body>
</html>

Output:
f) Print two addresses in the same format used on the front of
envelopes (senders address in top left corner, receivers address in
the center)

Program:

<!DOCTYPE html>
<html>
<head>
<title>
<Address></Address>
</title>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<address style="text-align:left">
Name: Naveen Kumar B<br>
Address: 12, New Street,<br>
Vellore, TamilNadu, 654 445<br>
Contact: 7567343362
</address>
<address style="text-align:center">
Name: Praveen Kumar<br>
Address: 16/22, Old Street,<br>
Kharagpur, West Bengal, 701 123
</address>
</body>
</html>

Output:
g) Print ten acronyms and abbreviations of your choice, each separated
by two lines. Specify the data that the abbreviations and acronyms
represent.

Program:

<!DOCTYPE html>
<html>
<head>
<title>
Acronyms and Abbreviations
</title>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<h2>Abbreviations</h2>
<p><b>Hover over the abbreviations to see their full form</b></p>

<p>The <abbr title="World Health Organization">WHO</abbr>


was formed in 1948</p><br>

<p>The <abbr title="United States of America">USA</abbr> is one


of the largest countries in the world</p><br>

<p>What <abbr title="Amount">amt</abbr> do you have</p><br>

<p><abbr title="Vellore Institute of Technology">VIT</abbr> is a


reputed university</p><br>

<p>Getting into <abbr title="Indian Institute of


Technology">IIT</abbr> is a dream for many students</p><br>

<p><abbr title="Head Of the Department">HOD</abbr> is calling


you</p><br>

<p>Can you finish it <abbr title="As soon as


possible">ASAP</abbr></p><br>

<p>I have to submit my <abbr title="Date Of Birth">DOB</abbr>


certificate</p><br>

<p><abbr title="In My Opinion">IMO</abbr> fruit juice is better


than cold drink</p><br>
<p>You should <abbr title="Do It Yourself">DIY</abbr></p><br>
</body>
</html>

Output:
2. HTML Image Exercises

a) Display five different images. Skip two lines between each image.
Each image should have a title.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<h2>List of images</h2>

<img src="C:\Users\naveen\Downloads\intro_image.jpeg"
alt="Introduction" width="100px" height="100px"
title="Introduction"><br><br>

<img src="C:\Users\naveen\Downloads\pexels-michael-block-
3225517.jpg" alt="Nature" width="100px" height="100px"
title="Nature"><br><br>

<img src="C:\Users\naveen\Downloads\pexels-yunus-tuğ-
8127035.jpg" alt="Lake City" width="100px" height="100px"
title="Lake City"><br><br>

<img src="C:\Users\naveen\Downloads\pexels-alexas-fotos-
2220337.jpg" alt="Lion" width="100px" height="100px"
title="Lion"><br><br>

<img src="C:\Users\naveen\Downloads\pexels-harvey-sapir-
1054655.jpg" alt="Elephant" width="100px" height="100px"
title="Elephant"><br><br>
</body>
</html>
Output:
b) Display an image that has a border of size 2, a width of 200, and a
height of 200.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<style>
img{
border: 2px solid black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<img src="C:\Users\naveen\Downloads\pexels-harvey-sapir-
1054655.jpg" alt="Elephant">
</body>
</html>

Output:
c) Display the image towards the right corner of the webpage.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Image on the right</title>
<style>
img{
float: right;
}
</style>
</head>
<body>
<h3>NAVEEN KUMAR B</h3>
<img src="C:\Users\naveen\Downloads\pexels-alexas-fotos-
2220337.jpg" alt="Lion" width="300px" height="300px">
</body>
</html>

Output:
3. HTML List Exercises

Program:
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists and Definition Lists</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #04f8bf;
color: #fff;
text-align: center;
padding: 10px;
}
nav {
background-color: #ccc;
padding: 10px;
}
section {
padding: 20px;
}
footer {
background-color: #666;
color: #fff;
text-align: center;
padding: 10px;
}
h2{
text-align: center;
background-color:aqua;
}
</style>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<header>
<img src="C:\Users\naveen\OneDrive\Documents\image111.jpg"
alt="Company Logo" width=150 height=150>
<img src="C:\Users\naveen\OneDrive\Documents\image222.avif"
alt="Product Image" width=150 height=150>
</header>
<nav>
<ul>
<li><a href="homePage.html">Home Page</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="contactUs.html">Contact Us</a></li>
</ul>
</nav>
<section>
<h1>Welcome to Our Website</h1>
<p>This is the main content of the page. It could include information
about the company, products, services, etc.</p>
<footer>
&copy; 2024 Naveen's Fresh Foods and Beverages. All rights reserved.
</footer>
</section>

</body>
</html>
Output:
II. Create the following list using HTML

Program:
<!DOCTYPE html>
<html>
<head>
<title>Nested and Definition List</title>
</head>
<body>
<h2 style="text-align: center;">NAVEEN KUMAR B</h2>
<h2 style="text-align: center">To illustrate Nested and Definition List
Tags</h2>
<hr style="border: 1px solid rgba(255, 0, 0, 0.775)">
<h3>An ordered nested List:</h3>
<list>
<ol type="1">
<li>Coffee</li>
<li>Tea
<ol type="a">
<li>Black tea</li>
<li>Green tea
<ol type="i">
<li>China</li>
<li>Africa</li>
</ol>
</li>
</ol>
</li>
<li>Milk</li>
</ol>
</list>
<h3>A Definition List:</h3>
<dl>
<dt>Bangalore</dt>
<dd>-Capital city of Karnataka</dd>
<dt>Mumbai</dt>
<dd>-Capital city of Maharashtra</dd>
</dl>
</body>
</html>
Output:
III. Create the following list using HTML tags

Program:
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<h2>List Examples</h2>
<h4>This is an unordered list</h4>
<list>
<ul type="disc">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</list>
<h4>This is an ordered list</h4>
<list>
<ol type="1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</list>
<h4>This is an ordered list starting at 10 and in upper-case roman
numerals</h4>
<list>
<ol type="I" start="10">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</list>
<h4>This is an unordered list nested within an ordered list</h4>
<list>
<ol type="1">
<li>Walk the dog</li>
<li>Wash the car</li>
<li>Get groceries
<ul>
<li>Ground beef</li>
<li>Mozzaralla</li>
<li>Lasagna Noodles</li>
<li>Pasta Sauce</li>
<li>Ricotta Cheese</li>
</ul>
</li>
<li>Clean the house</li>
<li>Take out garbage</li>
</ol>
</list>
</body>
</html>

Output:
4. HTML Table Exercises
Create the following tables using HTML code.

Program:
<!DOCTYPE html>
<html>
<head>
<title>Stock Table</title>
<style>
table, td, th{
border: 1px solid red;
}
.mycol{
text-align: left;
}
td, th{
text-align: center;
}
</style>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<table>
<tr>
<th colspan="7">My tech stock picks</th>
</tr>
<tr>
<th class="mycol" colspan="2">NAME</th>
<th>SYMBOL</th>
<th>CURRENT</th>
<th>52 WK HI</th>
<th>52 WK LO</th>
<th>P/E RATIO</th>
</tr>
<tr>
<td class="mycol" colspan="2">Microsoft</td>
<td>MSFT</td>
<td>86-3/8</td>
<td>119-15/16</td>
<td>75-1/2</td>
<td>56.09</td>
</tr>
<tr>
<td class="mycol" colspan="2">Cisco Systems</td>
<td>CSCO</td>
<td>72-1/8</td>
<td>82</td>
<td>24-13/16</td>
<td>400.69</td>
</tr>
<tr>
<td class="mycol" colspan="2">America Online</td>
<td>AOL</td>
<td>63</td>
<td>95-13/16</td>
<td>38-15/32</td>
<td>350.00</td>
</tr>
<tr>
<td class="mycol" colspan="2">Qwest Communications</td>
<td>Q</td>
<td>44-7/16</td>
<td>66</td>
<td>25-3/4</td>
<td>74.06</td>
</tr>
<tr>
<td class="mycol" colspan="2">Dell Computers</td>
<td>DELL</td>
<td>53-59/64</td>
<td>59-11/16</td>
<td>31-3/8</td>
<td>86.97</td>
</tr>
</table>
</body>
</html>

Output:

B. List of Fruits

Program:
<!DOCTYPE html>
<html>
<head>
<title>List of fruits</title>
<style>
table, td, th{
border: 3px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<table>
<tr>
<th colspan="8" style="font-size: 40px;"><i>Fresh
Fruits</i></th>
</tr>
<tr>
<td><b>It has long been known that a diet<br>
that includes at least a few servings<br>
of fresh fruit every day will help<br>
keep you healthy, fit and trim.</b></td>
<td><img
src="C:\Users\naveen\OneDrive\Pictures\Screenshots\Screenshot 2024-
01-15 100949.png" alt="Fruits" width="300px"></td>
</tr>
</table>
</body>
</html>
Output:

C. Time Table

Program:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
<style>
table, th, td{
border: 1px solid black;
background-color:rgb(0, 217, 255);
}
th, td{
text-align:center;
}
caption{
background-color:rgb(0, 217, 255);
}
body{
background-color: rgb(0, 217, 255);
}
</style>
</head>
<body>
<h2 style="text-align: center;">NAVEEN KUMAR B</h2>
<div>
<table style="margin-left:auto; margin-right:auto;">
<caption>COLLEGE TIME TABLE</caption>
<tr>
<th></th>
<th>8:30-9:30</th>
<th>9:30-10:30</th>
<th>10:30-11:30</th>
<th>11:30-12:30</th>
<th>12:30-2:00</th>
<th>2:00-3:00</th>
<th>3:00-4:00</th>
<th colspan="2" style="text-align:left;">4:00-5:00</th>
</tr>
<tr>
<td>MONDAY</td>
<td>---</td>
<td style="color:blue;">SUB1</td>
<td style="color:pink;">SUB2</td>
<td style="color:red;">SUB3</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H<br></td>
<td style="color:brown;">SUB4</td>
<td style="color: darkred;">SUB5</td>
<td colspan="2">Counselling Class</td>
</tr>
<tr>
<td>TUESDAY</td>
<td style="color:blue;">SUB1</td>
<td style="color:red;">SUB2</td>
<td style="color:pink;">SUB3</td>
<td>---</td>
<td style="color:orange;">SUB4</td>
<td style="color:brown;">SUB5</td>
<td colspan="2">Library</td>
</tr>
<tr>
<td>WEDNESDAY</td>
<td style="color:pink;">SUB1</td>
<td style="color:orange;">SUB2</td>
<td style="color:darkred;">SWA</td>
<td>---</td>
<td colspan="4" style="color:green;">LAB</td>
</tr>
<tr>
<td>THURSDAY</td>
<td>SUB1</td>
<td style="color:red;">SUB2</td>
<td style="color:orange;">SUB3</td>
<td>---</td>
<td style="color:blue;">SUB4</td>
<td style="color:red;">SUB5</td>
<td colspan="2">Library</td>
</tr>
<tr>
<td>FRIDAY</td>
<td style="color:orange;">SUB1</td>
<td style="color:brown;">SUB2</td>
<td style="color:blue;">SUB3</td>
<td>---</td>
<td style="color:pink;">SUB4</td>
<td style="color:brown;">SUB5</td>
<td colspan="2">Library</td>
</tr>
<tr>
<td>SATURDAY</td>
<td style="color:red;">SUB1</td>
<td colspan="3">Seminar</td>
<td style="color:pink;">SUB4</td>
<td style="color:brown;">SUB5</td>
<td colspan="2">Library</td>
</tr>
</table>
</body>
</html>
Output:

5. HTML LINK EXERCISES

A. Create links to five different already created pages.


Program:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h2>NAVEEN KUMAR B</h2>
<h3>Link to Google</h3>
<a href="https://www.google.com" target="_blank">Google</a>
<h3>Link to Amazon</h3>
<a href="https://www.amazon.com" target="_blank">Amazon</a>
<h3>Link to Flipkart</h3>
<a href="https://www.flipkart.com" target="_blank">Flipkart</a>
<h3>Link to Wikipedia</h3>
<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
<h3>Link to Facebook</h3>
<a href="https://www.facebook.com">Facebook</a>
</body>
</html>

Output:

B. Create a page with a link at the top of it that when clicked will jump
all the way to the bottom of the page. At the bottom of the page there
should be a link to jump back to the top of the page.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Top to Bottom Links</title>
</head>
<body>
<a id="top"></a>
<h1>TOP</h1>
<p>This is the top of the web page</p>
<a href="#bottom" id="bottom-link">Jump to Bottom</a>
<a id="bottom"></a>
<label for="texting">Enter the text</label>
<textarea id="texting" name="texting" rows="100"
cols="250"></textarea>
<h1>Bottom</h1>
<a href="#top" id="top-link">Jump to Top</a>
</body>
</html>

Output:
C. Write an HTML code to create a Home page having three links:
About Us, Our Services and Contact Us. Create separate web pages
for the three links.

Program:

HomePage.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<h2>NAVEEN KUMAR B</h2>
<p>This is the home page of the web site. You can click on any of
the below links</p>
<a href="AboutUs.html">About Us</a><br>
<a href="OurServices.html">Our Services</a><br>
<a href="ContactUs.html">Contact Us</a><br>
</body>
</html>

AboutUs.html

<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>This is the about us page</p>
<p>We take pride in our service and our service is always top
notch</p>
<a href="HomePage.html">Home Page</a><br>
<a href="OurServices.html">Our Services</a><br>
<a href="ContactUs.html">Contact Us</a><br>
</body>
</html>

OurServices.html

<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<p>Our services are mainly in the sectors of Software. Our
specialization is Software</p>
<a href="HomePage.html">Home Page</a><br>
<a href="AboutUs.html">About Us</a><br>
<a href="ContactUs.html">Contact Us</a><br>
</body>
</html>

ContactUs.html

<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>You can contact us at</p>
<a href="naveenkumar@gmail.com">Naveen's Email</a><br>
<p>Mobile No: 7343623828</p><br>
<a href="HomePage.html">Home Page</a><br>
<a href="AboutUs.html">About Us</a><br>
<a href="OurServices.html">Our Services</a><br>
</body>
</html>

Output:
6. HTML FORM EXERCISES

A. Design the following form using HTML

Program:

<!DOCTYPE html>
<html>
<head>
<title>Implementing a form</title>
<style>
table, th, td{
border: 1px solid black;
}
table{
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2 style="text-align:center">NAVEEN KUMAR B</h2>
<h3 style="text-align:center">23MCA0187</h3>
<table>
<tr>
<th colspan="8">Pizza Shop 2.0</th>
</tr>
<tr>
<td colspan="3"><label for="name">Name</label></td>
<td colspan="6"><input type="text" id="name"
name="name"></td>
</tr>
<tr>
<td colspan="3">Pizza Topping</td>
<td colspan="6"><input type="radio" id="sup" name="sup">
<label for="sup">Supreme</label><br>
<input type="radio" id="vege" name="vege">
<label for="vege">Vegetarian</label><br>
<input type="radio" id="hawa" name="hawa">
<label for="hawa">Hawaiian</label>
</td>
</tr>
<tr>
<td colspan="3"><label for="sauce">Pizza Sauce</label></td>
<td colspan="6">
<select id="sauce" name="sauce">
<option value="Tomato">Tomato</option>
<option value="Red Sauce">Red Sauce</option>
<option value="Peppary Sauce">Peppary Sauce</option>
<option value="Sweet Sauce">Sweet Sauce</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">Optional Extras</td>
<td><input type="checkbox" id="cheese" name="cheese">
<label for="cheese">Extra Cheese</label>
</td>
<td><input type="checkbox" id="gluten" name="gluten">
<label for="gluten">Gluten Free Base</label>
</td>
</tr>
<tr>
<td colspan="8"><label for="message">Delivery
Instructions:</label><br>
<textarea id="message" name="message" rows="4"
cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="8"><input type="submit" value="Send My Order"
method="post"></td>
</tr>
</table>
</body>
</html>
Output:

B. Design a student registration form which takes student name,


register number, DOB, program, email id, temporary address,
permanent address, phone number.

Program:

<!DOCTYPE html>

<html>

<head>

<title>Registration form</title>
<style>

table, th, td{

border: 1px solid black;

table{

margin-left: auto;

margin-right: auto;

</style>

</head>

<body>

<h2 style="text-align: center;">NAVEEN KUMAR B</h2>

<h3 style="text-align: center;">23MCA0187</h3>

<table>

<caption><b>Student Registration Form</b></caption>

<tr>

<td colspan="3"><label for="name">Name</label></td>

<td colspan="7"><input type="text" id="name"


name="name"></td>

</tr>

<tr>

<td colspan="3"><label for="register">Register


No</label></td>

<td colspan="7"><input type="text" id="register"


name="register" pattern="[0-9]{2}[A-Za-z]{3}[0-9]{4}"></td>

</tr>

<tr>

<td colspan="3"><label for="datebirth">DOB</label></td>

<td colspan="7"><input type="date" id="datebirth"


name="datebirth"></td>

</tr>

<tr>

<td colspan="3"><label
for="program">Program</label></td>

<td colspan="7"><select id="program" name="program">

<option value="MCA">MCA</option>

<option value="BCA">BCA</option>

<option value="MBA">MBA</option>

<option value="BSc">BSc</option>

</select></td>

</tr>

<tr>

<td colspan="3"><label for="emailid">Email


ID</label></td>

<td colspan="7"><input type="email" id="emailid"


name="emailid"></td>

</tr>

<tr>
<td colspan="10"><label for="taddress">Temporary
Address:-</label><br>

<textarea id="taddress" name="taddress" rows="4"


cols="40"></textarea></td>

</tr>

<tr>

<td colspan="10"><label for="paddress">Permanant


Address:-</label><br>

<textarea id="paddress" name="paddress" rows="4"


cols="40"></textarea>

</td>

</tr>

<tr>

<td colspan="3"><label for="phone">Phone


No</label></td>

<td colspan="7"><input type="tel" id="phone"


name="phone"></td>

</tr>

<tr>

<td colspan="10"><input type="submit" value="Submit"


method="post"></td>

</tr>

</table>

</body>

</html>
Output:

You might also like