Scribd
Upload
4 views41 pages

Webdd

The document contains multiple HTML problem statements by Aditya Prajapati, showcasing various HTML tags and their usage. It includes examples of basic tags, navigation links, image insertion, marquee, lists, anchor tags, forms, tables, and the use of rowspan and colspan. Each problem statement is presented with corresponding HTML code to demonstrate the concepts.

Uploaded by

adityaop1617
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views41 pages

Webdd

The document contains multiple HTML problem statements by Aditya Prajapati, showcasing various HTML tags and their usage. It includes examples of basic tags, navigation links, image insertion, marquee, lists, anchor tags, forms, tables, and the use of rowspan and colspan. Each problem statement is presented with corresponding HTML code to demonstrate the concepts.

Uploaded by

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

Name: Aditya Prajapati

Section: I
Roll No.: 04
PROBLEM STATEMENT 1
Usage of all the basic tags.
<html>
<head>
<title> HI THIS IS MY HTML PROJECT </title>x
</br>
</head>
<body>
<q> welcome to html </q>
</br>
<mark> i am Aditya Prajapati </mark>
</br>
<strike> HTML DOC </strike>
</br>
<s> HTML DOC </s>
</br>
<del> HTML DOC </del>
</br>
<pre>
*
**
***
****
</pre>
<p> Hello <big> Hello </big> <small> Hello </small></p>
<font size="6" face="TimesNewRoman" color="blue"> hello i am gauri
</font>
</br>
<font color ="red"> HELLOO </font></br>
<font color ="#ff0000"> HELLOO </font></br>
<font color ="blue"> HELLOO </font></br>
<font color ="#0000ff"> HELLOO </font></br>
<font color ="green"> HELLOO </font></br>
<font color ="#00ff00"> HELLOO </font></br>
<font color ="yellow"> HELLOO </font></br>
<font color ="#ffff00"> HELLOO </font></br>
<font color ="#ff00ff"> HELLOO </font></br>
<font color ="cyan"> HELLOO </font></br>
<font color ="#00ffff"> HELLOO </font></br>
<i> hiiiiiiii </i>
<b> ADITYA PRAJAPATI </b>
<p> a+b <sup> 2 </sup></p>
<h1 align="left"> hi my name is gauri </h1>
<h2 align="center" > hi my name is gauri </h2>
<h3 align="right"> hi my name is gauri </h3>
<p align="justify">
HTML stands for HyperText Markup Language. It is a standard language for
creating web pages and web applications.
</p>
<br/>
BACKGROUND-COLOR TAG:-(style="background-color:aqua;")
<p align="justify" style="background-color:aqua;">
HTML stands for HyperText Markup Language. CSS and JavaScript to enhance the
appearance and functionality of web pages.
</p>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 2
Page navigation in html within the same page.
<html>
<title> hi </title>
<body>
<a name="top section"></a>
<p>topsection</p>
<p><a href="#mid section">go to middle section</a></p>
<p><a href="#bottom section">go to bottom section</a></p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/>
<a name="mid section"></a>
<p>midsection</p>
<p><a href="#top section">go to top section</a></p>
<p><a href="#bottom section">go to bottom section</a></p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/><br/>
<a name="bottom section"></a>
<p>bottomsection</p>
<p><a href="#top section">go to top section</a></p>
<p><a href="#mid section">go to mid section</a></p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/><br/><br/><br/><br/>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 3
Write html program and apply image insert, marquee and list tags.
<html>
<head>
<title>Image Tag</title>
</head>
<body>
IMAGE WITH HEIGHT AND WIDTH:
<br/>
<img src="img.jpg" width="200" height="200"/>
<br/>
TITLE ON IMAGE:
<br/>
<img src="img.jpg" width="200" height="200" title="p1 title"/>
<br/><br/>
MARQUEE TAG:
<marquee>Text</marquee>
<marquee bgcolor="pink">Text</marquee>
1> SLIDE:
<br/>
<marquee behaviour="slide">slide</marquee>
2>SCROLL:
<br/>
<marquee behaviour="scroll">scroll</marquee>
3>ALTERNATE:
<br/>
<marquee behaviour="alternate">alternate</marquee>
4>DIRECTION:
<br/>
(a)LEFT
<br/>
<marquee direction="left">left</marquee>
(b)RIGHT
<br/>
<marquee direction="right">right</marquee>
<br/><br/><br/><br/>
LIST TAG:
<br/>
1> ORDERED LIST TAG:
<ol type="5">
<li>gauri</li>
<li>simran</li>
<li>vaishnavi</li>
<li>khushi</li>
</ol>
2> UNORDERED LIST TAG:
<ul>
<li>apple</li>
<li>mango</li>
<li>kiwi</li>
<li>cherry</li>
</ul>
3> DEFINITION LIST TAG:
<dl>
<dt>CSE</dt>
<dd>computer engg with cyber security</dd>
<dt>BTECH ME</dt>
<dd>bachlor of technology</dd>
</dl>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 4
Write html program to apply anchor tag to make hyper image/hyper link, embed tag, mail to
tag .
<html>
<head>
<title>ANCHOR TAG</title>
</head>
<body>
ANCHOR TAG:
<br/>
CLICKABLE IMAGE:
<br/>
<a href="imp.jpg">
<img src="img.jpg" width="200" height="200" title="go to img.html"/>
</a>
<br/><br/>
EMBED TAG:
<br/>
1> IMAGE USING EMBED TAG:
<br/>
<embed src="img.jpg" width="300" height="400"/>
<br/>
2> PDF USING EMBED TAG:
<br/>
<embed src="coursera html week1.pdf" style="width:100vw",height="100hw"/>
<br/><br/>
MAILTO TAG:
<br/>
<a href="mailto:[email protected]">send feedback</a>
<br/>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 5
Use of map tag.
<html>
<head>
<title>MAP TAG</title>
</head>
<body>
RECTANGLE MAP:
<map name="abc_map">
<area shape="rect" coords="0,0,200,200" href="img.html" target="_blank
title="p1"/>
<area shape="rect" coords="200,0,400,200" href="xoxo.html" target="_blank"
title="p2"/>
<area shape="rect" coords="0,200,200,400" href="gg.html" target="_blank"
title="p3"/>
<area shape="rect" coords="200,200,400,400" href="g.html" target="_blank"
title="p4"/>
</map>
<img src="img.jpg" usemap="#abc_map" width="400" height="400"/>
<br/><br/>
RECTANGLE AND CIRCLE MAP:
<br/>
<map name="def_map">
<area shape="rect" coords="100,0,300,100" href="xoxo.html" target="_blank"
title="p4"/>
<area shape="circle" coords="200,200,100" href="img.html" target="_blank"
title="p5"/>
</map>
<img src="img2.jpeg" usemap="#def_map" width="400" height="400"/>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 6
Use of form tag.
<html>
<head>
<titel> FORM </titel>
</br>
</head>
<body>
<form name="data enter form" action="form.html" method="get">
<h1> Data entry form </h1>
<p> Username: </p>
<input type="text" name="txtUserName" id="txtUserName" value=" "
placeholder="Nameee" maxlength="20"/>

<p> Password: </p>


<input type="password" name="pwduser" id="pwduser" value=" "
placeholder="entter your password" maxlength="10"/>

<p> Confiem Password: </p>


<input type="password" name="pwdconfirm" id="pwdconfirm" value=" "
placeholder="entter your password" maxlength="10"/>

<p> Gender </p>


<input type="radio" name="rdbgender" id="rdbgender" value="M"/> Male
<input type="radio" name="rdbgender" id="rdbgender" value="F"/> Female

<p> Are you physically challenged </p>


<input type="radio" name="hic" id="hic" value="Y"/> Yes
<input type="radio" name="hic" id="hic" value="N"/> No
<p> Skills </p>
<input type="checkbox" name="ccsk" id="ccsk" value="c" check/> C
<input type="checkbox" name="ccsk" id="ccsk" value="cpp"/> C++
<input type="checkbox" name="ccsk" id="ccsk" value="J"/> java

<p> Qualification </p>


<select name="sktq" multiple>
<option value="i"> intermediate </option>
<option value="UG"> undergraduate </option>
<option value="PG"> postgraduate </option> </select>

<p> Permanent address: </p>


<textarea rows="10" cols="30" wrap="virtual"> </textarea>

<input type="submit" value="click to submit"/>

<input type="reset" value="RESET"/>


</form>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 7
Use of table tag.
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Student marks list
</caption>
<th>
<td>NAME</td>
<td>P</td>
<td>C</td>
<td>M</td>
<td>%</td>
</th>
<tr>
<td>1</td>
<td>A</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>30</td>
</tr>
</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Change border color
</caption>
<th>
<td>NAME</td>
<td>P</td>
<td>C</td>
<td>M</td>
<td>%</td>
</th>
<tr bgcolor="cyan">
<td>1</td>
<td>A</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>10</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="green">3</td>
<td>B</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>20</td>
</tr>
<tr bgcolor="pink">
<td>3</td>
<td>C</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 8
Use of rowspan and colspan.
<html>
<title> hi </title>
<body>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Zero table
</caption>
<tr>
<tr bgcolor="cyan">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<tr bgcolor="yellow">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<tr bgcolor="cyan">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<tr bgcolor="yellow">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Zero table applying 'colspan'
</caption>
<tr>
<td colspan="4">0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<tr bgcolor="pink">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td colspan="4">0</td>
</tr>
</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Zero table applying 'rowspan'
</caption>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td rowspan="2">0</td>
<td>0</td>
<td>0</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<tr bgcolor="cyan">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
Zero table applying 'rowspan' &'colspan'
</caption>
<tr>
<td colspan="4">0</td>
</tr>
<tr>
<td rowspan="2">0</td>
<td>0</td>
<td>0</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td colspan="4">0</td>
</tr>
</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
HW
</caption>
<tr>
<td>1</td>
<td rowspan="3"></td>
</tr>
<tr>
<td>1</td>

</tr>
<tr>
<td>1</td>

</tr>

</table>
<br/>
<br/>
<table border="3" cellspacing="0" width="150" height="150">
<caption>
HW
</caption>
<tr>
<tr bgcolor="pink">
<td>1</td>
<td rowspan="2"></td>
</tr>
<tr>
<tr bgcolor="cyan">
<td>1</td>

</tr>
</table>
<table border="3" cellspacing="0" width="1250" height="150">
<caption>
Time table I
</caption>
<th>
<td>8:00-8:55</td>
<td>8:55-9:50</td>
<td>10:10-11:05</td>
<td>11:05-12:00</td>
<td>12:00-12:55</td>
<td>1:00-1:55</td>
<td>1:55-2:50</td>
<td>3:10-4:00</td>
<td>4:00-4:55</td>
<td>4:55-5:50</td>
</th>
<tr>
<td>Mon</td>
<td colspan="2">Software Engineering Lab<br/><b>aryabhatt First Floor
Lab</b></td>
<td bgcolor="cyan">TCS-604<br/><b>New Lab-1</b></td>
<td colspan="2">placement Preparation Classes<br/><b>LT-8</b></td>
<td>LUNCH</td>
<td bgcolor="yellow">TCS-601<br/><b>New Staff Room CR-10</b></td>
<td bgcolor="yellow">TCS-601<br/><b>New Staff Room CR-10</b></td>
<td>TCS-693<br/><b>CR-7</b></td>
<td>TCS-693<br/><b>CR-7</b></td>
</tr>
<tr>
<td>Tue</td>
<td colspan="2">Web Development Lab<br/><b>Digital Lab-1</b></td>
<td>XCS-601(Soft Skills)<br/><b>CR-7</b></td>
<td>XCS-601(QAR)<br/><b>CR-7</b></td>
<td>XCS-601(Verbal)<br/><b>LT-1</b></td>
<td>LUNCH</td>
<td>TCS-693<br/><b>LT-8</b></td>
<td bgcolor="cyan">TCS-604<br/><b>New Staff Room CR-9</b></td>
<td colspan="2">Compiler Design Lab<br/><b>Lab-5</b></td>
</tr>
<tr>
<td>Wed</td>
<td colspan="3">SWAYAM/Training/Extra-Curricular Activities/LIB</td>
<td colspan="2">placement Preparation Classes<br/><b>LT-8</b></td>
<td>LUNCH</td>
<td>TCS-693<br/><b>CR-7</b></td>
<td bgcolor="cyan">TCS-604<br/><b>New Staff Room CR-9</b></td>
<td colspan="2">Compiler Design Lab<br/><b>Lab-5</b></td>
</tr>
<tr>
<td>Thu</td>
<td colspan="3">SWAYAM/Training/Extra-Curricular Activities/LIB</td>
<td>LUNCH</td>
<td colspan="2">Web Development Lab<br/><b>Lab-5</b></td>
<td bgcolor="green">TCS-611 (Discussion Class)<br/><b>CR-7</b></td>
<td bgcolor="cyan">TCS-604<br/><b>New Staff Room CR-9</b></td>
<td bgcolor="red">Elective</td>
<td bgcolor="red">Elective</td>
</tr>
<tr>
<td>Fri</td>
<td colspan="2">Competitive Programming(TOC-601)-Audit Course(Online)</td>
<td bgcolor="green">TCS-611(Online)</td>
<td>LUNCH</td>
<td colspan="2">Software Engineering Lab<br/><b>Lab-5</b></td>
<td bgcolor="yellow">TCS-601<br/><b>New Staff Room CR-10</b></td>
<td bgcolor="yellow">TCS-601<br/><b>New Staff Room CR-10</b></td>
<td bgcolor="red">Elective</td>
<td bgcolor="red">Elective</td>
</tr>
</table>
</body>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 9
Using frame tag.
<html>
<head>
<title>
Frameset Tag
</title>
<frameset cols="30%,30%,*">
<frame name="frame1" src="xoxo.html"/>
<frame name="frame2" src="img.html"/>
<frame name="frame3" src="xoxo.html"/>
</frameset>
</head>
</html>
Name: Aditya Prajapati
Section: I
Roll No.: 04
PROBLEM STATEMENT 10
Making profile.
<html>
<head>
<title>My Personal profile</title>
</head>
<body>
<table border="3" cellspacing="0" width="1100" height="600" >
<tr height="100" bgcolor="pink">
<th colspan="3"> <b> <font size="5" colspan="1"> <center> PERSONAL
PROFILE </center> </font> </b> </th>
</tr>
<tr>
<td height="200" width="200">
<center><img src="gauri.jpg" height="150" width="150" alt="your
photo"></center>
</td>
<td>
<font face="Times New Roman" size="4">
<center>
<b>ADITYA PRAJAPATI</b>
<br/>
STUDENT AT GRAPHIC ERA UNIVERSITY
<br/>
SECTION: I
<br/>
UNIVERSITY ROLL NO.: 2019549
</center>
</font>
</td>
<td >
<font face="Times New Roman" size="4">
<center>
<b>ADDRESS:</b><br/> Sewla Kalan Majra DehraDun
</center>
</font>
</td>
</tr>
<tr>
<td height="150">
<font size="4">
<a href="about.html" target="frame1"> Home </a><br>
<a href="qual.html" target="frame1"> Qualification </a><br>
<a href="project.html" target="frame1"> Project </a><br>
<a href="personal.html" target="frame1"> Personal Details </a><br>
<a href="feedback.html" target="frame1"> Feedback form </a><br>
</font>
</td>
<td colspan="2">
<iframe src="p10_about.html" name="frame1" width="100%"
height="100%"></iframe>
</td>
</tr>
</table>
</body>
<html>
PRACTICAL 11:
Using CSS (inline, internal, external)

Inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body style="background-color: #e0e0e0; padding: 20px;">
<div style="background-color: pink; padding: 20px;">
<h1 style="color: blue; font-size: 24px; text-align:
center;">this is css.</h1>
<p style="color: #666666; font-size: 16px; text-align:
center;">hi hi hi php.</p>
</div>
</body>
</html>
Internal CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: pink;
padding: 20px;
}

.container {
background-color: blue;
padding: 20px;
}

h1 {
color: red;
font-size: 24px;
text-align: center;
}

p {
color: red;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>This is css</h1>
<p>hiiiiiiiiii....</p>
</div>
</body>
</html>
External CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>this is css</h1>
<p>Hello world....</p>
</div>
</body>
</html>

CSS:
body {
background-color: pink;
padding: 20px;
}

.container {
background-color: white;
padding: 20px;
}

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

p {
color: red;
font-size: 16px;
text-align: center;
}
PRACTICAL 12:
Design a bookstore from which user can buy books and generate bill using HTML,
CSS and JAVASCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image:url('book.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
html{
min-height: 100%;
display: grid;
}
body{
margin:auto;
}
</style>
</head>
<body>
<h1 align="center">Novel Nest</h1>
<form id="bookStore" action="bookData.html" method="get">
<label>Name:</label>
<input type="text" id="name" name="name" value=""
placeholder="Enter your name"/>
<br/><br/>
<label>Student Id:</label>
<input type="password" id="pswd" name="pswd" value=""
placeholder="Enter your student id"/>
<br/>
<br/>
<input type="submit" value="Enter"/>
</form>

</body>
</html>
PRACTICAL 13:
Design Landing page of a website which user can use to gain some knowledge in anu
particular field using HTML, CSS and JAVASCRIPT.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Top Bar</title>
<link rel="stylesheet" href="page.css"/>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<body>
<div class="top">
<div class="tl">
<img src="factopediaa.jpeg" height="80px"/>
<h1 class="h1">FACTOPEDIA</h1>
</div>
<div class="tr">
<div class="menu">
<div class="menu-item"><a href="#">Home</a></div>
<div class="menu-item"><a href="#">About Us</a></div>
<div class="menu-item"><a href="#">Services</a></div>
<div class="menu-item"><a href="#">Contact</a></div>
</div>
<div class="search">
<form action="#">
<input type="text" placeholder="Search Courses"
name="search">
<button>
<i class="fa fa-search" style="font-size: 18px;"></i>
</button>
</form>
</div>
</div>
</div>

<br/>

<div class="img">
<img src="facto.jpeg" height="395px" width="100%"/>
</div>
<br/>
<div class="nbp">
<div class="navbar">
<div class="nav"><a href="#">WIKIPEDIA</a></div>
<br/>
<div class="nav"><a href="#">TIMES OF INDIA</a></div>
<br/>
<div class="nav"><a href="#">HINDUSTAN TIMES</a></div>
<br/>
<div class="nav"><a href="#">THE ECONOMIC TIMES</a></div>
</div>
<div class="bdy">
<h1>HOME</h1>
<p>
"Welcome to Factopedia - Your Gateway to Verified Knowledge!</p>
<p>Factopedia is your go-to destination for reliable and
comprehensive information on a wide range of topics. Whether you're
a curious mind seeking answers or a researcher delving into specific
subjects, Factopedia is here to provide you with accurate and
trustworthy facts.</p>
<p>Explore our extensive database of articles, curated and vetted by
experts, covering everything from science and history to technology
and culture. With Factopedia, you can dive deep into the world of
knowledge with confidence, knowing that every piece of information
is thoroughly researched and verified.</p>
</div>
<div class="crs">
<img src="COURSE.jpg"/>
<p>DIPLOMA IN MASS COMMUNICATION</p>
</div>
</div>
<br/>
<div class="btm">
<div class="contact">
<h2>CONTACT</h2>
Mob no.: 7007727286<br/>
Location: 123,First floor,Delhi,India
</div>
<div class="sp"></div>
</div>
<footer align="middle">&#169 Copywrite issued</footer>

</body>
</html>
PRACTICAL 14:
Java Script Questions

1.) Write a function that takes a string as input and reverses the string while maintaining the
position of special characters. For example, if the input is "hello!world", the output should be
"dlrow!olleh".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Reverse String with Special Characters</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
max-width: 500px;
margin: 0 auto;
}
input, button {
padding: 10px;
margin: 5px 0;
width: 100%;
box-sizing: border-box;
}
.output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="inputString" placeholder="Enter
a string">
<button onclick="reverseString()">Reverse
String</button>
<div class="output" id="output"></div>
</div>

<script>
function reverseStringMaintainSpecialChars(str) {
// Extract letters and numbers from the string
let letters = [];
for (let char of str) {
if (/[a-zA-Z0-9]/.test(char)) {
letters.push(char);
}
}
// Reverse the letters and numbers
letters = letters.reverse();
let result = '';
let letterIndex = 0;
// Reconstruct the string
for (let char of str) {
if (/[a-zA-Z0-9]/.test(char)) {
result += letters[letterIndex++];
} else {
result += char;
}
}
return result;
}

function reverseString() {
const inputString =
document.getElementById('inputString').value;
const output =
reverseStringMaintainSpecialChars(inputString);
document.getElementById('output').textContent =
output;
}
</script>
</body>
</html>
2.) Write a function that takes an array of numbers and an integer k as input and returns the
kth largest number in the array.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Kth Largest Number</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
max-width: 500px;
margin: 0 auto;
}
input, button {
padding: 10px;
margin: 5px 0;
width: 100%;
box-sizing: border-box;
}
.output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="inputArray" placeholder="Enter
numbers separated by commas">
<input type="number" id="inputK" placeholder="Enter k
(1, 2, 3, ...)" min="1">
<button onclick="findKthLargest()">Find Kth
Largest</button>
<div class="output" id="output"></div>
</div>

<script>
function findKthLargest(numbers, k) {
// Sort the array in descending order
numbers.sort((a, b) => b - a);

// Check if k is within the valid range


if (k > 0 && k <= numbers.length) {
// Return the kth largest element
return numbers[k - 1];
} else {
// Handle invalid k
return null; // or throw an error, return a
specific value, etc.
}
}

function findKthLargestHandler() {
const inputArray =
document.getElementById('inputArray').value.split(',').map(Num
ber);
const k =
parseInt(document.getElementById('inputK').value);

const kthLargest = findKthLargest(inputArray, k);


const output = document.getElementById('output');
if (kthLargest !== null) {
output.textContent = `The ${k}th largest
number is ${kthLargest}`;
} else {
output.textContent = 'Invalid input or k is
out of range';
}
}

document.querySelector('button').addEventListener('cli
ck', findKthLargestHandler);
</script>
</body>
</html>

You might also like