PRACTICAL FILE(WT)
Q1.Make following five different web pages:
i. formatting styles and heading: include bold,italics,underline,strike,subscript,supscript and all six types
heading
INPUT:-
<html>
<head>
<title>my web page</title>
</head>
<body>
<p>this is my first webpage.i am a bca student.
<h1>this is my first webpage.
<h2>this is my first webpage.
<h3>this is my first webpage.
<h4>this is my first webpage.
<h5>this is my first webpage.
<h6>this is my first webpage.
<br> <b>HIMANSHI GUPTA</b>
<br><i>I am bca student</i></br>
<br><u>I learning wt</u></br>
<br><s>how to create webpage?</s></br>
<p><br><b> programming language using sup for(a+b)<sup>2</sup> as follows-</br></b>
(a+b)<sup>2</sup>
=a<sup>2</sup>+b<sup>2</sup>
+2ab</p>
<p> <br><b> programming language using sub for sulphuric acid as follows-</br></b>
H<sub>2</sub>SO<sub>4</sub>
</body>
</html>
OUTPUT:-
(ii.) Font styles and image tag
INPUT:
<html>
<head>
<title>my web page</title>
</head>
<body>
<p><br><font color="red">This is me.</font>This is himashi.</br>
<br><font size="6">i am student of bca.</font>2nd shift.</br>
<br><font face="veranda">This is veranda.</font>this is balcony.</br>
</p>
<img src="https://encryptedtbn0.gstatic.com/images?
q=tbn:ANd9GcRM9GNTFenU_T9caTwA63o86iaVHMnf9eeEPw&s">
</body>
</html>
OUTPUT:
(iii.)Marquee: move text , image and hyperlink
INPUT:
<html>
<marquee>
Welcome to TRINITY.
</marquee>
<marquee
bgcolor="yellow"
behavior="alternate"
direction="right"
loop="6"
scroll amount="1"
scrolldelay="40"
title="Silly tags aren't just for Netscape
anymore." width="80%">
Welcome to TRINITY
</marquee>
</html>
OUTPUT:
marquee.html
(iv.) other tags br , hr , pre , p
<br>tag(break)
Input:
<html>
<body>
<p> this is the first line.<br>this is the second line.</br>
</body>
</html>
OUTPUT:
<hr>tag
INPUT:
<html>
<body>
<p>first section of content.</p>
<hr>
<p>second section of content.</p>
</body>
</html>
OUTPUT:
<Pre >tag:
INPUT:
<html>
<body>
<pre>
this text is a
displayed in a
fixed-width font
and preserves spaces and line breaks.
</pre>
</body>
</html>
OUTPUT:
<P>TAG:
Input:
<html>
<body>
<p>first session of content</p>
<p>second session of content</p>
</body>
</html>
Output:
Q2. Create an unordered list nested inside ordered list and apply the following :
● Insert an image of Main item on top right corner of web page.
● Display heading as a marquee.
● Use different font styles and colors for different ordered list items.
● Insert horizontal line after each ordered item.
INPUT:
<html>
<head>
<title>Ordered List Example</title>
<style>
body {
position: relative;
margin: 0;
font-family: Arial, sans-serif;
}
.main-image {
position: absolute;
top: 10px;
right: 10px;
width: 150px;
}
h1 {
text-align: center;
font-size: 24px;
margin: 20px 0;
}
h1 marquee {
font-size: 36px;
color: #4A90E2;
}
ol {
font-size: 18px;
padding-left: 20px;
}
ol li {
margin-bottom: 10px;
}
ol li:nth-child(1) {
color: red;
font-family: 'Times New Roman', serif;
font-weight: bold;
}
ol li:nth-child(2) {
color: green;
font-family: 'Courier New', monospace;
font-style: italic;
}
ol li:nth-child(3) {
color: purple;
font-family: 'Georgia', serif;
text-decoration: underline;}
ol li ul {
margin-top: 5px;
padding-left: 20px;
}
ol li ul li {
color: orange;
font-family: 'Verdana', sans-serif;
}
ol li::after {
content: "";
display: block;
border-bottom: 1px solid #ccc;
margin: 5px 0;
}
.content {
margin: 50px;
}
</style>
</head>
<body>
<img src="C:\Users\Dell\Desktop\image(1).jpg" alt="Main Item Image" class="main-image">
<h1>
<marquee behavior="scroll" direction="right">Welcome to the CAFE</marquee>
</h1>
<div class="content">
<ol>
<li>
chocolate
<ul>
<li>dairy milk</li>
<li>five star</li>
</ul>
</li>
<li>
coffee
<ul>
<li>latte</li>
<li>capuccino</li>
</ul>
</li>
<li>
drinks
<ul>
<li>frooti</li>
<li>pepsi</li>
</ul>
</li>
</ol>
</div>
</body>
</html>
OUTPUT:
Q3. Design a table with row span and column span and make use of attributes colspan, rowspan, width,
height, cellpadding, cellspacing etc.
INPUT:
<html>
<head>
<title>my webpage</title>
</head>
<body>
<table border="2" align="left" cellpadding="10">
<caption>time table</caption>
<tr><th rowspan="3">SL</th>
<th>name</th>
<th>roll no</th>
</tr>
<tr><td>rashi</td>
<td>001</td>
</tr>
<tr><td>radhika</td>
<td>002</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Q4. Design following frame:
INPUT:
<html>
<head>
<title>my first webpage</title>
</head>
<body>
<table border="2" align="left">
<tr><th></th>
<th>EXPLANATION<th>
</tr>
<tr><td >Main Menu</td>
<td>---------</td>
</tr>
<tr><u><td>Topic1</u></td>
<td>--------</td>
</tr>
<tr><td><u>Topic2</u></td>
<td>view example</td>
</tr>
<tr><td><u>Topic3</u></td>
<td>EXAMPLE</td>
</tr>
</body>
</html>
OUTPUT:
Q5. Make an image map showing the usage of shape, coords, href attributes in map definition. Link each
hotspot to their respective details. All the web pages should be designed with proper background color,
images, font styles and headings.
INPUT:
<html>
<head>
<title>HTML Image Maps</title>
</head>
<body>
<img src="C:\Users\Dell\Desktop\image.jpg"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<area shape="poly" coords="59,31,28,83,91,83"
href="C:\Users\Dell\Desktop\image.jpg"
alt="Triangle">
<area shape="circle" coords="155,56,26"
href="C:\Users\Dell\Desktop\image.jpg"
alt="Circle">
<area shape="rect" coords="224,30,276,82"
href="C:\Users\Dell\Desktop\image.jpg"
alt="Square">
</map>
</body>
</html>
OUTPUT:
Q6. Design Student registration form for admission in college.
INPUT:
<html>
<head>
<title>webpage</title>
<body>
<form>
<caption><b><u>Student Registration Form</b></u></caption><br>
<label for="fname">first name:</label>
<input type="text"id="fname"name="fname"><br>
<label for="lname">last name:</label>
<input type="text"id="lname"name="lname"><br>
<label for="email">email id:</label>
<input type="text"id="email"id="email"><br>
<label for="board">board name:</label><br>
<input type="checkbox"id="CBSE"name=CBSE Board"value="CBSE">
<label for="CBSE">CBSE Board</label><br>
<input type="checkbox"id="ICSE"name=ICSE Board"value="ICSE">
<label for="ICSE">ICSE Board</label><br>
<input type="checkbox"id="state board"name=State Board"value="state board">
<label for="state">State Board</label><br>
<label for="year">year of passing:</label>
<input type="text"id="year"name="year of passing"><br>
<label for="course">course name</label><br>
<input type="checkbox"id="state board"name=State Board"value="state board">
<label for="course">BCA</label><br>
<input type="checkbox"id="BBA course"name=BBA"value="BBA">
<label for="course">BBA</label><br>
<input type="checkbox"id="Bcom hons"name=Bcom"value="Bcom hons">
<label for="Bcom hons">Bcom hons</label><br>
</form>
</body>
</html>
OUTPUT:
Q7. Create a webpage and show the usage of inline and internal style sheet and external style sheet?
INPUT:
<html>
<head>
<link rel="stylesheet"type="text/css"href="mystyle.css">
<style type="text/css">
h1{font-size:32pt;font-family:arial;color:red;}
</style>
</head>
<title>webpage</title>
<body>
<h1>i am himanshi</h1>
<h3>this is me.</h1>
<p>i am from bca</p>
<h2 style="color:blue;text-align:center;">INTRODUCTION</h2>
<p style="color:red;">I am himanshi gupta</p>
</body>
</html>
OUTPUT:
Q8. Create a webpage containing a background image and apply all the background styling attributes?
INPUT:
<html>
<head>
<title>Background Styling</title>
<style>
body {
background-image:"C:\Users\Dell\Desktop\image(1).jpg";
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color:blue;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: white;
}
.container {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
max-width: 800px;
}
h1 {
font-size: 3em;
margin-bottom: 20px;
}
p{
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Webpage</h1>
<p>This is an example webpage with a background image and all relevant background styling attributes
applied.</p>
</div>
</body></html>
OUTPUT:
Q9.Create a web page showing the usage of font styling attributes?
INPUT:
<html>
<body>
<font face="Times New Roman" size="6">
BCA
</font> <br />
<font face="Verdana" size="6">
BCA
</font><br />
<font face="Comic sans MS" size=" 6">
BCA
</font><br />
<font face="WildWest" size="6">
BCA
</font><br />
<font face="Bedrock" size="6">
BCA
</font><br />
<font color="red">BCA</font><br />
<font color="green">BCA</font>
</body>
</html>
OUTPUT:
Q10. Create a web page and apply all Text styling attributes use Id and class selector.
INPUT:
<html>
<head>
<style>
.geeks {
color: green;
}
.gfg {
background-color: yellow;
font-style: italic;
color: green;
}
</style>
</head>
<body style="text-align:center">
<h1 class="geeks">
Web technology
</h1>
<h2>.class Selector</h2>
<div class="gfg">
<p>Web Technology,security</p>
<h1 id="gfg1">WT javascript</h1>
<h2 id="gfg2">#id selector</h2>
</div>
</body>
</html>
OUTPUT:
Q11. Create a webpage and implement all list styling attributes
INPUT:
<html>
<head>
<title>List Styling Example</title>
<style>
</style>
</head>
<body>
<h1>List Styling Example</h1>
<h2>Unordered List (Square Style)</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h2>Ordered List </h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language used to describe the presentation of a document written in HTML.</dd>
<dt>JavaScript</dt>
<dd>A programming language that allows you to implement complex features on web pages.</dd>
</dl>
</body>
</html>
OUTPUT:
Q12. Create a Webpage with three equal columns.
INPUT:
<html>
<head>
<title>Three Equal Columns</title>
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
.container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap; }
.column {
flex: 1;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
min-width: 250px; }
h2 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
p{
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Three Equal Columns</h1>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the content of the first column. You can add any text or elements here to make it unique.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the content of the second column. Each column is designed to be equal in width and responsive.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is the content of the third column. Flexbox ensures all columns remain equal and adjust based on the screen size.</p>
</div>
</div>
</body>
</html>
OUTPUT:
Q13.Create a webpage containing bootstrap table.
INPUT:-
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Bootstrap Table</h2>
<p>table</p>
<table class="table">
<tr>
<th>Subect</th>
<th>Semester</th>
<th>Year</th>
</tr>
<tbody>
<tr>
<td>WT</td>
<td>2nd</td>
<td>1st</td>
</tr>
<tr>
<td>WS</td>
<td>2nd</td>
<td>1st</td>
</tr>
<tr>
<td>C</td>
<td>2nd</td>
<td>1st</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
OUTPUT:-
Q14.Create a webpage containing various types of images.
INPUT:-
<html>
<head>
<title>Bootstrap IMAGE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Rounded Corners,Circles,Thumbnail</h2>
<p>this is type of various images in bootstrap:-</p>
<img src="C:\Users\Dell\Desktop\image(html).jpg" class="img-rounded" width="304" height="236">
<img src="C:\Users\Dell\Desktop\image(1).jpg" class="img-circle" width="304" height="236">
<img src="C:\Users\Dell\Desktop\image(2).jfif" class="img-thumbnail" width="304" height="236">
</div>
</body>
</html>
OUTPUT:-
Q15.Create a webpage containing various types of buttons.
INPUT:-
<html>
<head>
<title>Bootstrap button</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<div class="container">
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
<div class="container">
<h2>Button active/disabled</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
</body>
</html>
OUTPUT:
Q16. Create a webpage containing various, typography classes.
INPUT:-
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Typography.lead</h2>
<p>"HELLO"</p>
<p class="lead">my name is himanshi</p>
<div class="container">
<h2>Typography.small</h2>
<p>"HELLO"</p>
<p class="small">my name is himanshi</p>
<div class="container">
<h2>Typography.left,right,center,justified</h2>
<p class="text-left">Left-aligned text.</p>
<p class="text-right">Right-aligned text.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text. </p>
<div class="container">
<h2>Typography lower,upper,capital</h2>
<p class="text-lowercase">Lowercase.</p>
<p class="text-uppercase">Uppercase.</p>
<p class="text-capitalize">Capitalize.</p>
<div class="container">
<h2>Typography</h2>
<p>The <abbr title="BCA">WT</abbr> subject</p>
<p>BCA<abbr title="BCA" class="initialism">1st</abbr> 1styear </p>
<div class="container">
<h2>Typography</h2>
<p>ul:</p>
<ul class="list-unstyled">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<div class="container">
<h2>Typography</h2>
<p>list-inline</p>
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<div class="container">
<h2>Typography</h2>
<p>dl</p>
<dl class="dl-horizontal">
<dt>Coffee</dt>
<dd>-hot drink</dd>
<dt>Milk</dt>
<dd>-cold drink</dd>
</dl>
<div class="container">
<h2>Code</h2>
<p>pre element:</p>
<pre>Text in a pre element
is displayed in a fixed-width
font</pre>
<p>pre scrollbar:</p>
<pre class="pre-scrollable">Text in a pre element
is displayed in a fixed-width
font</pre>
</div>
</body>
</html>
OUTPUT:
Q17. Create a webpage containing to display the heading using Jumbotron.
INPUT:-
<html >
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap JUMBOTRON</h1>
<p>Bootstrap can be used in HTML, CSS, and JS</p>
</div>
<p>BCA</p>
<p>1st 1year</p>
</div>
</body>
</html>
OUTPUT:-
