Uday SWD
Uday SWD
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>
</head>
<body>
</body>
</html>
Output:
Practical :1
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.
Input :
<html>
<head>
<title>My1sttext</title>
</head>
<body>
<center>
<h1><u>Wikipedia</u></h1>
</center>
<h3><em><u>Cloudstorage</u></em></h3>
</body>
</html>
Output :-
Practical : 2
Aim :Use Hyper Link Tag To Navigate Through Different Web Pages.
Tag description :
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:-
Output 3:-
Practical : 3
Tag description :-
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:-
Output 2:-
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>
Output :
Practical : 5
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>
Output :
Practical : 6
Tags Description :
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>
Output :
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>
Output :
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
<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>
Output :
Practical :9
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>
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>
<input type="checkbox">WRITING<br>
<input type="checkbox">TRAVELLING<br>
<input type="checkbox">SINGING<br>
Output:-
Practical :9
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>
<!--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>
OUTPUT:-
Practical :10
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>
</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>
</select>
<input size="25" name="first
name"> &nb
sp;
<input size="25" name="Last Name"> <br>Prefix
First
Name  
; &nb
sp;
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>
&nbs
p; &n
bsp;
<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>
<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>
&nbs
p;
<select name="Year">
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
<br>
Month &nbs
p; &n
bsp;
Date
Year <br>
<div style="text-align: left;"><br>
<span style="font-weight: bold;">MOTHER`S MAIDEN NAME*</span>
: &nb
sp; &
nbsp;
&nbs
p; &n
bsp;
<span style="font-weight: bold;">
TELEPHONE NUMBER* :</span> <br>
<input size="50" name="MOTHER`S MAIDEN
NAME"> &n
bsp;
&nbs
p;
<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] <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"> &nbs
p; &n
bsp;
<input size="30" name="address/province"><br>
city
&nbs
p; &n
bsp;
&nbs
p;
state/province<br>
<input size="30" name="postal/zip
code"> &nbs
p; &n
bsp;
<input size="30" name="country"><br>
postal/zip
code
&nbs
p; &n
bsp;
country<br>
&nbs
p; &n
bsp;
&nbs
p; &n
bsp;
&nbs
p;
<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;">* &n
bsp;
&nbs
p; &n
bsp;
&nbs
p; &n
bsp;
</span></span>Account Category<br>
<span style="font-weight: bold;"><span style="font-weight: bold;"></span> </span>
<select name="ACCOUNT TYPE">
<option>SAVINGS</option>
<option>CURRENT</option>
</select>
<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>
</div>
<div style="text-align:
left;"> &nbs
p; &n
bsp;
&nbs
p; &n
bsp;
<input name="SUBMIT" type="submit"><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</body>
</html>
Output:-