0% found this document useful (0 votes)
53 views36 pages

Uday SWD

Uploaded by

chintanbarad4807
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
53 views36 pages

Uday SWD

Uploaded by

chintanbarad4807
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Enrolment no: 236010307120 Batch: Co - 6

Name: Chaudhari Uday

Practical
Aim:Use HTML text formatting tags to create web page.
TagsDescription:

 <html>:ThistagrepresentstherootofanHTMLdocument.
 <head>:Thistagcontainsmeta-informationabouttheHTMLdocument,suchasthetitle.
 <title>:ThistagspecifiesthetitleoftheHTMLdocument,whichappearsinthebro
wser'stitlebarortab.
 <body>:ThistagdefinesthemaincontentoftheHTMLdocument.
 <i>:Thistagmakesthetextwithinititalicized. 

Input:
<html>

<head>

<title>My 1st App</title>

</head>

<body>

<h1>My Name is Uday Chaudhari

<h2><i>My Name is Uday Chaudhari</i></h2>

<h3><u>My Name is Uday Chaudhari</u></h3>

<h4><b>My Name is Uday Chaudhari</b></h4>

<h5><mark>My Name is Uday Chaudhari</mark></h5>

<h6>My Name is Uday Chaudhari</h6>

</body>

</html>

Static Webpage Design (4311603) Page 1


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output:

Static Webpage Design (4311603) Page 2


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :1

Aim: UseHTMLTextFormattingTagsToCreateWeb Page.

TagsDescription :
 <html>:ThistagrepresentstherootofanHTMLdocument.
 <head>:Thistagcontainsmeta-
informationabouttheHTMLdocument,suchasthetitle.
 <title>:ThistagspecifiesthetitleoftheHTMLdocument,whichappearsinthe
browser'stitlebarortab.
 <body>:ThistagdefinesthemaincontentoftheHTMLdocument.
 <center>:Thistagisusedtocenter-alignthecontentwithinit.
 <h1>:Thistagrepresentsaheadinglevel1,whichistypicallyusedformain
headings.
 <u>:Thistagunderlinesthetextwithinit.
 <h3>:Thistagrepresentsaheadinglevel3,whichisusedforsubheadings.
 <em>:Thistagemphasizesthetextwithinit,typicallydisplayedinitalics.
 <p>:Thistagdefinesa paragraph.
 <i>:Thistagmakesthetextwithinititalicized.
 <b>:Thistagmakesthetextwithinitbold.
 <big>:Thistagincreasesthefontsizeofthetextwithinit.
 <small>:Thistagdecreasesthefontsizeofthetextwithinit.
 <mark>:Thistaghighlightsthetext withinit.
 <sup>:Thistagrepresentssuperscripttext.
 <sub>:Thistagrepresentssubscripttext.
 <del>:Thistagrepresentsdeletedtext,typicallydisplayedwithastrikethrough.

Static Webpage Design (4311603) Page 3


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Input :

<html>

<head>

<title>My1sttext</title>

</head>

<body>

<center>

<h1><u>Wikipedia</u></h1>

</center>

<h3><em><u>Cloudstorage</u></em></h3>

<p><i>This article is aboutenterprise-levelclouddatastorage. Forconsumer-


levelfilehostingservices,seefilehostingservice.</i></p>

<p><b>"Cloud Drive"</b>redirectshere.For theproductformerly known


asAmazonCloudDrive,seeAmazonDrive.</p>

<p><big><b>Cloud storage</b></big> is a model of<b><small><mark>


computerdatastorage</mark></small></b>inwhichdata,saidtobeon<b>"thecloud"</b>,issto
redremotelyinlogicalpoolsandisaccessibletousersoveranetwork,typicallytheInternet.<i>The
physical storage spans multiple servers</i><small>(sometimes in
multiplelocations)</small>,andthephysicalenvironmentistypically<br>ownedandmanagedb
yacloudcomputingprovider</br>These <sup>cloud</sup><sub>storage</sub>providers
areresponsible for keeping the data available and accessible,and the physical
environmentsecured, protected, and running.<del> People and organizations buy or lease
storage</del>capacityfromtheproviderstostoreuser,organization,or<em>applicationdata.</e
m></p>

</body>

</html>

Static Webpage Design (4311603) Page 4


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output :-

Static Webpage Design (4311603) Page 5


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical : 2

Aim :Use Hyper Link Tag To Navigate Through Different Web Pages.

Tag description :

 <html> tag marks the start of the HTML document.


 <head> tag contains metadata about the document, such as the title.
 <title> tag sets the title of the document, which appears in the browser's title bar or tab.
 <body> tag contains the visible content of the document.
 <h2> tag creates a heading with larger text size.
 <a> tag creates a hyperlink.
 The href attribute specifies the destination of the hyperlink.
 The text within the <a> tags is the clickable text that represents the link.

Input1 :-

<html>
<head>

<title></title>
</head>

<body>
<h2><a href="https://www.google.com/">click here to open google</a></h2><br></br>
<h2><a href ="file:///E:/uday%20swd%20practical/udaya.html">go to other page</a></h2>

</body>

</html>

Input 2 :-

<html>
<head>
<title>Other page</title>

</head>

<body><h2>other page</h2>

</body>

</html>
Static Webpage Design (4311603) Page 6
Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output 1:-

Output 2:-

Static Webpage Design (4311603) Page 7


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output 3:-

Static Webpage Design (4311603) Page 8


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical : 3

Aim :- Use Image Tags To Create Web Pages.

Tag description :-

 <img> tag is used to embed an image into the HTML document.


 The src attribute specifies the source file of the image.
 The alt attribute provides alternative text for the image if it cannot be
displayed.
 The height and width attributes determine the dimensions of the image.
 The border attribute sets the border thickness around the image.

Input :

<html>
<head>

<title>image</title>

</head>
<body>
<imgsrc="C:\Users\SKY VISION\Desktop\image.jpg" alt="image not found" height=300
width=500 border=5>

</body>
</html>

Output 1:-

Static Webpage Design (4311603) Page 9


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output 2:-

Static Webpage Design (4311603) Page 10


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical : 4

Aim : Use Html Table Tags To Create Webpage As Per Given Sample.

Tags Description :
.
• <table> : This tag defines an HTML table.
• <tr> : This tag defines a row in the table.
• <th> : This tag defines a header cell in the table.
• <td> : This tag defines a data cell in the table.
• <sup> : This tag defines superscript text, typically used for displaying
exponents.

Input :

<html>
<head>
<title>Time Table</title>
</head>
<body>
<table border="2"align="center">
<tr>
<thcolspan="7">A.Y.DADABHAI TECHNICAL INSTITUTE</th>
</tr>
<tr>
<thcolspan="7">Student Time Table</th>
</tr>
<tr>
<thcolspan="2"><b><center>Computer Department</th></b></center>
<thcolspan="5"><b><center>2<sup>nd</sup>Sem-b</th></b></center>
</tr>
<tr>
<th><center>Pr .No</th>
<th><center>Time</th>
<th><center>Mon</th>
<th><center>Tue</th>
<th><center>Wed</th>
<th><center>Thu</th>
<th><center>Fri</th>
</tr>
<tr>
<td><center><b>1</center></td></b>

Static Webpage Design (4311603) Page 11


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<td><b><center> 8:30 to 9:30 </td></center></b>


<td rowspan="2"><b><center><p>CO4 SWD RB<br>C05 ECP MSG<br>CO6
BOOPSIP</td></b></center>
<td><center><b>BOOP DAC</td></center></b>
<td rowspan="2"><b><center>CO4 BOOP NIA<br>CO5 PHYSICS ASG<br>CO6 BDE
MRV</td></b></center>
<td><b><center>FDE MSG</td></b></center>
<td><b><center>BOOP AMH</td></b></center>
</tr>
<tr>
<td><center><b>2</center></td></b>
<td><b><center>9:30 to 10:30</td></b></center>
<td><b><center>MATHS VRC</td></b></center>
<td><b><center>PHYSICS HRC</td></b></center>
<td><b><center>FDE MSG</td></b></center>
</tr>
<tr>
<td><center><b>3</center></td></b>
<td><b><center>10:30 to 11:30</td></b></center>
<td><b><center> IC </td></b></center>
<td rowspan="2"><b><center>CO4 PHYSCIS HKS<br>CO5 BDE RJS<br>CO6 BOOP
SIP</td></b></center>
<td><b><center>PHYSICS HRC</td></b></center>
<td><b><center>MATHS MAP</b></center></td>
<td rowspan="2"><b><center>CO4 BOOP MIP<br>CO5 SWD RB<br>CO6 ECP
MSG</td></b></center>
</tr>
<tr>
<td><center><b>4</center></td></b>
<td><b><center>11:30 to 12:30</td></b></center>
<td><b><center>MATHS MAP</td></b></center>
<td><b><center>FDE MSG</td></b></center>
<td><b><center>BOOP DAC</td></b></center>
</tr>
<tr align="center">
<td colspan="2"><b><center>12:30 to 01:00</td></b></center>
<td colspan="5"><b><center> RECESS</td></b></center>
</tr>
<td><center><b>5</center></td></b>
<td><b><center>01:00 to 02:00</td></b></center>
<td><b><center>PHYSCIS HKS</td></b></center>
<td rowspan="2"><b><center>CO4 ECP MSG<br>CO5 BOOP DAC<br>CO6 SWD
DTP</td></b><center>
<td><b><center>MATHS VRC</td></b></center>

Static Webpage Design (4311603) Page 12


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<td rowspan="2"><b><center>CO4 SWD RB<br>CO5 SWD AC<br>CO6 SWD


PMG</td></b></center>
<td rowspan="2"><b><center>CO4 BDE MRV<br>CO5 BOOP PRV<br>CO6 PHYSCIS
HKS</td></b></center>
</tr>
</body>
</html>

Output :

Static Webpage Design (4311603) Page 13


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical : 5

Aim :Use Sorted List To Create Web Page

Tags Description :

• <h1> : This tag defines a heading in the HTML document, and the number
indicates the level of the heading.
• <ol> : This tag defines an ordered list in HTML.
• <li> : This tag defines a list item in an ordered or unordered list.
• <ol type="A"> : This tag defines an ordered list with a different type attribute,
in this case, using uppercase alphabetical characters for the numbering.

Input :

<html>
<head>
<title>order list</title>
</head>
<body>
<h1>Types of operators in c</h1>
<ol>
<li>Arithmetic operators</li>
<li>Relational operators</li>
<li>Logical operators</li>
<li>Bitwise operators</li>
<li>Assignment operators</li>
<li>Other operators</li>
</ol>
<h1>Datatypes in c</h1>
<ol types="A">
<li>Primitive data types</li>
<li>User defined data types</li>
<li>Derived data types</li>
<ol>
</body>
</html>

Static Webpage Design (4311603) Page 14


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output :

Static Webpage Design (4311603) Page 15


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical : 6

Aim :Use Unsorted List To Create Wed Page

Tags Description :

• <ul> : This tag defines an unordered list in HTML.


• <li> : This tag defines a list item in an unordered list.
• <ul type="circle"> : This tag defines an unordered list with a different type
attribute, in this case, using circle bullets for the list items.
• <ul type="square"> : This tag defines an unordered list with a different type
attribute, in this case, using square bullets for the list items.

Input :

<html>
<head>
<title>un order list</title>
</head>
<body>
<h1>Types of operators in C</h1>
<ul>
<li>Arithmetic operators</li>
<li>Relational operators</li>
<li>Logical operators</li>
</ul>
<ul Types="circle">
<li>Arithmetic operators</li>
<li>Relational operators</li>
<li>Logical operators</li>
</ul>
<ul Types="square">
<li>Arithmetic operators</li>
<li>Relational operators</li>
<li>Logical operators</li>
</ul>
</body>
</html>

Static Webpage Design (4311603) Page 16


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output :

Static Webpage Design (4311603) Page 17


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :7

Aim : Use Definition List To Create Webpages As Per Given Sample Page.

Tag Description :
• <dl> : This tag defines a description list in HTML.
• <dt> : This tag defines a term or name in a description list.
• <dd>: This tag defines the description or value for the term in a description list.

Input :
<html>
<head>
<h1>List of cars</h1>
</head>
<body>
<d1>
<dt>ROLLS-ROYS</d1>
<dd>Rolls-Roys Cullinan</dd>
<dd>Rolls-Roys Phantom</dd>
<dd>Rolls-Roys Ghost </dd>

<dt>LAMBORGHINI</dt>
<dd>Lamborghini Urus</dd>
<dd>Lamborghini Huracan Evo Spyder</dd>
</d1>
</body>
<html>

Static Webpage Design (4311603) Page 18


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output :

Static Webpage Design (4311603) Page 19


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :8

Aim : Use Semantic Tags To Organize Web Pages Contents As Per Given
Sample.

Tag Description :
 <html>: This tag represents the root element of an HTML document.
 <head>: This tag contains meta-information about the HTML document, such as the
title and links to external stylesheets or scripts.
 <title>: This tag sets the title of the HTML document, which appears in the browser's
title bar or tab.
 <body>: This tag contains the visible content of the HTML document, such as
headings, paragraphs, images, and links.
 <header>: This tag represents the introductory content or a set of navigational links
at the top of the webpage.
 <img>: This tag is used to embed an image in the HTML document.
 <h1>, <h2>, <h3>: These tags represent different levels of headings, with <h1>
being the highest level and <h3> being the lowest level.
 <p>: This tag is used to define a paragraph of text.
 <nav>: This tag represents a section of the webpage that contains navigation links.
 <a>: This tag creates a hyperlink to another webpage or a specific location within the
same webpage.
 <footer>: This tag represents the footer section of the webpage, typically containing
information about the author or copyright.
 <section>: This tag defines a section of content within an HTML document.
 <article>: This tag represents a self-contained composition in a document, such as a
blog post or a news article.
 <hr>: This tag creates a horizontal line or divider in the HTML document.
 <aside>: This HTML element represent a portion of a document whose content is
only indirectly related to the document’s main content.

Input :

<html>
<head>
<title>My website></title>
</head>
<body>
<header>
<img src="C:\Users\SKY VISION\Desktop\gtu.png" height="15%">
<h2>GUJARAT TECHNOLOGICAL UNIVERSITY</h2>
</header>
<hr>
<nav>
Static Webpage Design (4311603) Page 20
Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<a href="">About Us</a>


<a href="">Academics</a>
<a href="">Student Corner</a>
<a href="">Events</a>
<a href="">Cicular</a>
<a href="">Alumni</a>
<a href="">Gallery</a>
<a href="">Placement</a>
</nav>
<hr>
<footer>
<p>Author: Uday Chaudhari</p>
<p><a href=mailto:[email protected]">[email protected]</a></p>
</footer>
<hr>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is a Swiss-based international non-
governmental organization founded in 1961
that works in the field of wilderness preservation and the reduction of human impact on the
environment. It was formerly named
the World Wildlife Fund, which remains its official name in Canada and the United States.
WWF is the world's largest conservation organization,
with over five million supporters worldwide, working in more than 100 countries and
supporting around 3,000 conservation and environmental projects.</p>
</section>

<article>
<h2>Mozilla Firefox</h2>
<p>Firefox is a free, Open Source web browser developed by the Mozilla Foundation and
Mozilla Corporation in 2004</p>
</article>

<aside>
<h3>Imagicaa Theme Park</h3>
<p>Imagicaa is a themed entertainment destination featuring multiple themed experiences, an
on-premise hotel, unique characters,
innovative and unique attractions, thrilling rides and shows, meeting spaces, and major
events - it's a place for all seasons, all interests, and all ages.</p>
</aside>
</body>
</html>

Static Webpage Design (4311603) Page 21


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Output :

Static Webpage Design (4311603) Page 22


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :9

Aim:- [A]: Create A Student Registration Webpage Using


Different Html Form Elements

Tag Description :
 <html>: This tag represents the root element of an HTML document.
 <head>: This tag contains meta-information about the HTML document, such as the
title and links to external stylesheets or scripts.
 <title>: This tag sets the title of the HTML document, which appears in the browser's
title bar or tab
 <form>: This tag represents a form that contains input fields for the user to fill out.
 <label>: This tag is used to define a label for an input field. It helps provide context
or description for the corresponding input.
 <input>: This tag is used to create input fields where users can enter data. It has
different types such as text, radio, and email.
 <select>: This tag creates a dropdown menu where users can select an option from a
list.
 <option>: This tag defines an option within a dropdown menu.
 <textarea>: This tag creates a multi-line text input field where users can enter longer
text or address.
 <br>: This tag creates a line break, which moves the content to the next line.
 <body>: This tag represents the main content of the HTML document.

Input:-

<html>
<head>
<title>Registration Page</title
</head>
<body>
<h1 align="center"> REGISTRATION FORM</h1>
<form>

<label> Firstname </label>


<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>

Static Webpage Design (4311603) Page 23


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Course :
</label>
<select>
<option value="Course">Course</option>
<option>INFORMATION TECHNOLOGY</option>
<option>COMPUTER ENGINEERING</option>
<option>CIVIL ENGINEERING</option>
<option>ELECTRICAL ENGINEERING</option>
<option>MECHANICAL ENGINEERING</option>

</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<label for="HOBBIES">HOBBIES</label><br>
<input type="checkbox">PLAYING<br>
<input type="checkbox">READING<br>

Static Webpage Design (4311603) Page 24


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<input type="checkbox">WRITING<br>
<input type="checkbox">TRAVELLING<br>
<input type="checkbox">SINGING<br>

<input type="button" value="Submit"/>


<input type="reset">
</form>
</body>
</html>

Output:-

Static Webpage Design (4311603) Page 25


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :9

Aim:- [B]:Create Student feedback Form Using Different HTML


Form Element.

Tag Discription:-
 <html>: This tag represents the root element of an HTML document.
 <head>: This tag contains metadata about the HTML document, such as the title.
 <title>: This tag sets the title of the HTML document, which appears in the browser's
title bar or tab.
 <body>: This tag contains the visible content of the HTML document.
 <h1>: This tag defines a heading level 1 and is used to display the title of your
feedback form.
 <form>: This tag creates a form that allows users to input and submit data.
 <input>: This tag creates an input field where users can enter data. The type attribute
specifies the type of input field (e.g., text, radio, email).
 <textarea>: This tag creates a multiline input field where users can enter longer text,
such as their suggestions.
 <select>: This tag creates a dropdown list from which users can select a rating for
your service.
 <option>: This tag defines an option within a dropdown list.
 <p>: This tag represents a paragraph of text.
 <br>: This tag inserts a line break.
 <submit>: This tag creates a submit button for the form.
 <reset>: This tag creates a reset button that clears the form inputs.

Input:-
<html>
<head>
<title>FEEDBACK FORM</title>
</style>
</head>
<body>
<h1>FEEDBACK FORM</h1>
<form action="mailto:[email protected]" method="POST"
enctype="TEXT/PLAIN">
FIRST NAME:
<input type="TEXT" name="FIRSTNAME" placeholder="ENTER THE NAME HERE">
SECOND NAME:
<input type="text" name="SECONDNAME" placeholder="ENTER SURNAME HERE">
phone number:
<input type="text" name="mobile number" placeholder="mobile number">
<br>

Static Webpage Design (4311603) Page 26


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<!--IT`S IMPORTANT THAT BOTH OF THESE RADIO BUTTON HAVE THE SAME
NAME SO THEY BEHAVE AS ONE COMPONENT(I.E. ONLY ONE CAN BE
SELECTED AT A TIME)-->
<input type="RADIO" name="GENDER" value="MALE">MALE<br>
<input type="RADIO" name="GENDER" value="FEMALE">FEMALE<br>
<br>
<!-- THIS USES THE NEW HTML "EMAIL" INPUT TYPE WHICH WILL
AUTOMATICALLY VALIDATES THE EMAIL ADDRESS WHEN THE SUBMIT
BUTTON IS CLICKED-->
EMAIL: <input type="EMAIL" name="MAIL" placeholder="E-MAIL ADDRESS"><br>
<br>write your suggestion here and help us improve:<br>
<textarea rows="6" cols="50" name="RATING STAR"></textarea>
<p>PLEASE RATE OUR SERVICE WITH STARS.</p>
<br>
<select name="RATING STAR">
<option value="5*">5*</option>
<option value="4*">4*</option>
<option value="3*">3*</option>
<option value="2*">2*</option>
<option value="1*">1*</option>
</select><br>
<br>
<p>are you satisfied with our service?</p>
<input type="radio" name=service value="yes">
yes
<input type="radio" name=service value="no">
no
</br>
<input type="SUBMIT" value="SEND FEEDBACK"></br>
<input type="RESET" value="RESET">
</form>
<footer>
<hr>
<center>
<b> your feedback help us improve our service in future</b>
<br>THANK YOU </br>
<br>VISIT AGAIN</br>
</body>
</html>

Static Webpage Design (4311603) Page 27


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

OUTPUT:-

Static Webpage Design (4311603) Page 28


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Practical :10

Aim:- Create A Bank Account Opening Form Using Different


HTML Form Element In Komozer.

Tag Discription:-
 <html>: This tag represents the root of an HTML document.
 <head>: This tag contains meta-information about the HTML document, such as the
character encoding and the title of the webpage.
 <meta>: This tag specifies metadata about the HTML document, such as the
character encoding.
 <title>: This tag defines the title of the webpage, which appears in the browser's title
bar or tab.
 <body>: This tag represents the content of the HTML document that will be
displayed in the browser.
 <div>: This tag defines a division or a section in the HTML document.
 <span>: This tag is used to group inline elements and apply styles to them.
 <select>: This tag creates a dropdown list from which the user can select an option.
 <option>: This tag defines an option in a dropdown list.
 <br>: This tag inserts a line break or a new line in the HTML document.

Input:-

<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">


<title>Uday bank</title>

</head><body>
<div style="text-align: center;"><span style="font-weight: bold;">ACCOUNT
OPENING FORM</span><br>
<div style="text-align: left;"><span style="font-weight: bold;">PERSONAL
INFORMATION</span><br>
<div style="text-align: left;"><br>
<span style="font-weight: bold;">FULL NAME* </span>: <br>
<div style="text-align: left;"><br>
<select name="prefix">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>

Static Webpage Design (4311603) Page 29


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

</select>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <input size="25" name="first
name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;
<input size="25" name="Last Name">&nbsp;&nbsp; <br>Prefix&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; First
Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;&nbsp; Last Name<br>
<br>
<div style="text-align: left;"><span style="font-weight: bold;">DATE OF
BIRTH* </span>:<br>
<br>
<select name="Month">
<option>JANUARY</option>
<option>FEBRUARY</option>
<option>MARCH</option>
<option>APRIL</option>
<option>MAY</option>
<option>JUNE</option>
<option>JULY</option>
<option>SEPTEMBER</option>
<option>OCTOBER</option>
<option>NOVEMBER</option>
<option>DECEMBER</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;
<select name="Date">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>

Static Webpage Design (4311603) Page 30


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;
<select name="Year">
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
<br>
&nbsp;Month&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Year &nbsp;&nbsp; <br>
<div style="text-align: left;"><br>
<span style="font-weight: bold;">MOTHER`S MAIDEN NAME*</span>
:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs

Static Webpage Design (4311603) Page 31


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<span style="font-weight: bold;">
TELEPHONE NUMBER* :</span> <br>
<input size="50" name="MOTHER`S MAIDEN
NAME">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;<input size="50" name="TELEPPHONE NUMBER" value="(000)
000-0000"><br>
<span style="font-weight: bold;">E-MAIL ADDRESS* : </span><br>
<input size="50" name="E-MAIL ADDRESS"><br>
[email protected] &nbsp;&nbsp;&nbsp;&nbsp; <br>
<div style="text-align: left;"><br>
<span style="font-weight: bold;">ADDRESS* :</span><br>
<input size="120" name="address"><br>
street address<br>
<input size="120" name="address"><br>
street address line-2<br>
<input size="30"
name="city">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input size="30" name="address/province"><br>
city&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state/province<br>
<input size="30" name="postal/zip
code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;
<input size="30" name="country"><br>
postal/zip
code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; country<br>

Static Webpage Design (4311603) Page 32


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

<div style="text-align: left;"><span style="font-weight: bold;">EDUCATION


LEVEL :&nbsp;</span>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;">FORM OF IDENTIFICATION :</span><br>
<input value="high school or below" name="EDUCATION LEVEL" type="radio">High
School Or
Below&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; <input name="FORM OF IDENTIFICATION" value="NATIONAL
IDENTITY CARD" type="radio">NATIONAL IDENTITY CARD<br>
<input name="education level" value="f" type="radio">
Undergraduate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="FORM OF IDENTIFICATION" value="DRIVER`S LICENSE"
type="radio">DRIVER`S LICENSE<br>
<input name="education level" value="master degree" type="radio">Master
Degree&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;
&nbsp;&nbsp; <input name="FORM OF IDENTIFICATION" value="INTERNATIONAL
PASSPORT" type="radio">INTERNATIONAL PASSPORT<br>
<input name="education level" value="phD"
type="radio">phD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Static Webpage Design (4311603) Page 33


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="FORM OF IDENTIFICATION" value="STUDENT ID"
type="radio">STUDENT
ID<br>
<div style="text-align: left;"><span style="font-weight: bold;">ACCOUNT
INFORMATION*<br>
</span>Account Type<span style="font-weight: bold;"><span style="font-weight:
bold;">*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
</span></span>Account Category<br>
<span style="font-weight: bold;"><span style="font-weight: bold;"></span>&nbsp;</span>
<select name="ACCOUNT TYPE">
<option>SAVINGS</option>
<option>CURRENT</option>
</select>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;
<select name="account category">
<option>savings</option>
<option>current</option>

</select>
<br>
Monthly salary*<br>
<input name="monthly salary" value="INR"><br>
<div style="text-align: left;"><br>

Static Webpage Design (4311603) Page 34


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

</div>
<div style="text-align:
left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="SUBMIT" type="submit"><br>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<br>
<br>
</body>
</html>

Output:-

Static Webpage Design (4311603) Page 35


Enrolment no: 236010307120 Batch: Co - 6
Name: Chaudhari Uday

Static Webpage Design (4311603) Page 36

You might also like