Anshita Web Tech

QUES1: - HOW TO MAKE FORM PROGRAM IN HTML?
ANS: - <body>
<form>
<h1> Enter your name</h1> <br>
<input type="text" name="username">
</form>
</body>
OUTPUT: -
QUES2: - HOW TO MAKE TABLE IN HTML?
ANS: -
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Table
</Title>
</Head>
<Body>
Hello User! <br>
The Following table shows the student details <br><br>
<table> <! -- The table tag which allows page to create a table. -->
<tr> <! -- First Row in the table -->
<th> <! -- First cell in first row which holds the column1 heading in the table -->
Roll No.
</th>
<th> <! -- second cell in first row which holds the column2 heading in the table -->
Student Name
</th>
<th> <! -- Third cell in first row which holds the column3 heading in the table -->
Marks
</th>
<th> <! -- Fourth cell in first row which holds the column1 heading in the table -->
Address
</th>
</tr> <! -- First Row is closed -->
<tr> <! -- Second Row starts in the table for entering the values of columns -->
<td> <! -- value in first Column -->
101
</td>
<td> <! -- value in Second Column -->
ANSHITA
</td>
<td> <! -- value in third Column -->
85
</td>
<td> <! -- value in fourth Column -->
FARIDABAD
</td>
</tr> <! -- Second row is closed-->
<tr> <! -- Third Row starts in the table -->
<td>
102
</td>
<td>
GAURAV
</td>
<td>
90
</td>
<td>
FIROJPUR JHIRKA
</td>
</tr> <! -- Third Row is closed -->
<tr> <! --Fourth Row starts in the table -->
<td>
103
</td>
<td>
RIDIT MANGLA
</td>
<td>
95
</td>
<td>
BALLABGARH
</td>
</tr> <! -- fourth row is closed -->
</table>
</Body>
</Html>
OUTPUT: -
QUES3: - HOW TO CREATE UNORDERED LIST IN HTML?
ANS: - <html>
<head>
<title>Unordered List</title>
</head>
<body>
Unordered list
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Orange</li>
</ul>
<ul type="circle">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Orange</li>
</ul>
<ul type="square">
ANSHITA MANGLA
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Orange</li>
</ul>
</body>
</html>
OUTPUT: -
QUES4: - HOW TO CREATE ORDERED LIST IN HTML?
ANS: -</head>
<body>
Ordered list
<ol>
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
<ol type="a">
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
<ol type="A">
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
<ol type="i">
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
<ol type="I">
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
<ol start="6">
<li>Potato</li>
<li>Tomato</li>
<li>Brinjal</li>
<li>Peas</li> </ol>
</body>
</html>
OUTPUT: -
QUES5: - HOW TO CREATE HYPERLINK IN HTML?
ANS: - <html>
<head>
<title>Hyperlink</title>
</head>
<body>
Want to see an Apple?
<a href="apple.png">click here</a><br>
Want to see a Mango?
<a href="mango.jpg">click here</a>
</body>
</html>
OUTPUT: -
QUES6: -HOW TO CREATE SIMPLE LAYOUT IN HTML?
ANS: - <html>
<head>
<title>Basic layout of web page</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" width="200" height="50" align="center">
Header
</td>
</tr>
<tr>
Menu items
</td>
</tr>
<tr>
<td width="50" height="200">Left<br />
Navigation
</td>
<td width="150" height="200">
Main Content Area
</td>
</tr>
<tr>
Footer
</td>
</tr>
</table>
</body>
</html>
OUTPUT: -
QUES7: -HOW TO MAKE REGISTRATION FORM IN HTML?
ANS: - <Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<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>
Course:
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</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>
<input type="button" value="Submit"/>
</form>
</body>
</html>
OUTPUT: -
QUES8: -HOW TO MAKE DESCRIPTION LIST IN HTML?
ANS: - <dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
OUTPUT: -
QUES8: - HOW TO MAKE HEAD PROGRAM IN HTML?
ANS: - <!DOCTYPE html>

<html>
<head>
<title>This Page Title</title>
</head>
<body>
<p>The body's content is displayed in the browser window. </p>
<p>The content of the title element is displayed in the browser tab, in favorites and in
search engine results. </p>
</body>
</html>
OUTPUT: -
QUES9: -HOW TO MAKE <RADIO> TAG IN HTML?
ANS: - <html>
<head>
</head>
<title> Example of Radio Button</title>
<body>
<form>
<label>
Gender:
</label> <br>
<input type="radio" id="gender" name="gender" value="male"/> Male
<br>
<input type="radio" id="gender" name="gender" value="female"/> Female
<br/>
</form>
</body>
</html>
OUTPUT: -
QUES10: -HOW TO MAKE HTML HEADINGS?
ANS: - <h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>
OUTPUT: -
QUES11: - HOW TO MAKE “WELCOME” PROGRAM IN HTML CSS?
ANS: - <body style="text-align: center;">

<h2 style="color: red;">Welcome to javaTpoint</h2>
<p style="color: blue; font-size: 25px; font-style: italic;">This is a great website to
learn technologies in very simple way. </p>
</body>
OUTPUT: -
QUES12: -HOW TO MAKE FONTSIZE WITH PIXELS IN HTML CSS?

<html>
<head>
<style>
#First {
font-size: 40px;
}
#Second {
font-size: 20px;
}
</style>
</head>
<body>
<p id="first">This is a paragraph having size 40px. </p>
<p id="second">This is another paragraph having size 20px. </p>
</body>
</html>
OUTPUT: -
QUES13: - HOW TO CREATE LIST PROGRSM IN HTML CSS?
ANS: - ul.a
{
list-style-type: circle;
}
ul.b
{
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
OUTPUT: -
QUES14: - HOW TO MAKE VARIABLE PROGRAM IN HTML CSS?

<html>
<head>
<title>CSS Variables</title>
<style>
: root
{
--bg-color: lightgreen;
--text-color: red;
}
/* var () function used here */

Body
{
background-color: var (--bg-color);
text-align: center;
}
h1
{
color: var (--text-color);
}
div {
color: var (--text-color);
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the javaTpoint.com</h1>
<div>
This is an example of CSS variables
<h3>--bg-color: lightgreen;</h3>
<h3>--text-color: red;</h3>
</div>
</body>
</html>
OUTPUT: -
QUES15: - HOW TO MAKE INLINE PROGRAM IN HTML CSS?
ANS: - <h3 style="color: red;

font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
OUTPUT: -
QUES16: - HOW TO MAKE INTERNAL PROGRAM IN HTML CSS?

<html>
<head>
<style>
/*Internal CSS using element name*/
body {background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p {font-size: 20px;}
/*Internal CSS using class name*/
. blue {color: blue;}
. red {color: red;}
. green {color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
OUTPUT: -
QUES17: -HOW TO MAKE EXTERNAL PROGRAM IN HTML CSS?

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
OUTPUT: -
QUES18: - HOW TO MAKE DISPLAY IN HTML CSS?

<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial. </p>
<p>SQL Tutorial. </p>
<p>HTML Tutorial. </p>
<p>CSS Tutorial. </p>
</body>
</html>
OUTPUT: -
QUES19: -HOW TO MAKE CURSOR PROGRAM IN HTML CSS?
ANS: - <html>
<head>
</head>
<style>
body{
background-color: lightblue;
color:green;
text-align: center;
font-size: 20px;
}
</style>
<body>
<p>Move your mouse over the below words for the cursor change. </p>
<div style = "cursor:alias">alias Value</div>
<div style = "cursor:auto">auto Value</div>
<div style = "cursor:all-scroll">all-scroll value</div>
<div style = "cursor:col-resize">col-resize value</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default value</div>
<div style = "cursor:copy">copy value</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ew-resize">ew-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>
OUTPUT: -
QUES20: - HOW TO MAKE COLORS PROGRAM IN HTML CSS?
ANS: - <html>
<head>
<title>CSS hsl color property</title>
<style>
h1
{
text-align:center;
}
#Rgb
{
color:rgb(255,0,0);
}
#Rgba
{
color:rgba(255,0,0,0.5);
}
#hex
{
color: #EE82EE;
}
#Short
{
color: #E8E;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
</body>
</html>
OUTPUT: -
QUES21: -How to write "Hello, World!" program in JavaScript?
ANS: - <html>
<body>
<script>

</script>
</body>
</html>
OUTPUT: -
QUES22: - HOW TO MAKE FORM PROGRAM IN JAVASCRIPT?
ANS: - <html>
<head>
<title>Form Validation</title>
<script type = "text/JavaScript">
// Form validation code will come here.
function validate ()
{

if (document.myForm.Name.value == "" )
{
alert (“Please provide your name!”);
document.myForm.Name.focus() ;
document.myForm.Name.style.backgroundColor = "red";
return false;
}
else
{
document.myForm.Name.focus();
document.myForm.Name.style.backgroundColor = "green";
if (document.myForm.EMail.value == "" )
{
alert (“Please provide your Email!”);
document.myForm.EMail.focus() ;
return false;
}
if (document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value )
||
document.myForm.Zip.value.length != 5 ) {

alert (“Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
If (document.myForm.Country.value == "-1" ) {
Alert (“Please provide your country!”);
return false;
}
}
Return (true);
}
</script>
</head>

<body>
<form action = "" name = "myForm" onsubmit = "return (validate ());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td aligns = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td aligns = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td aligns = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td aligns = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected> [choose yours] </option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td aligns = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT: -
QUES23: - HOW TO MAKE ONCLICK PROGRAM IN JAVASCRIPT?
ANS: - <html>
<head>
<script>
function callMe ()
{
alert("ANSHITA");
}
</script>
</head>
<body>
<input type="button" onclick="callMe ()" value="click me"/>
</body>
</html>
OUTPUT: -
QUES24: - HOW TO MAKE IMAGE PROGRAM IN JAVASCRIPT?
ANS: - <!DOCTYPE HTML>

<HTML>
<HEAD>
<TITLE> TAG</TITLE>
</HEAD>
<BODY>
<IMG src="C:\Users\Anshita Mangla\Pictures\Saved Pictures\download (1).JPG"
alt="download (1)" width="170" height="200">
<BR>
BEST PIC
</BODY>
</HTML>
OUTPUT: -
QUES25: - HOW TO LOGIN OUR PHP ACCOUNT IN JAVASCRIPT?
ANS: - /*===== MENU SHOW =====*/

constshowMenu = (toggleId, navId) => {
consttoggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle&&nav) {
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle','nav-menu')
/*===== REMOVE MENU MOBILE =====*/
constnavLink = document.querySelectorAll('.nav__link')
functionlinkAction(){
// Active link
navLink.forEach(n=>n.classList.remove('active'))
this.classList.add('active')
// Remove Menu Mobile

constnavMenu = document.getElementById('.nav-menu')
navMenu.classList.remove('show')
}
navLink.forEach(n=>n.addEventListener('click', linkAction))

CONNECTIVITY TO PHP
<?php
$servername="localhost";
$username="root";
$password="";
$database_name="database123";
$conn=mysqli_connect ($servername, $username, $password, $database_name);

//now check the connection
if (! $conn)
{
Die ("Connection Failed:”. mysqli_connect_error());
if(isset($_POST['save']))
{
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$email = $_POST['email'];
$password = $_POST['password'];
$Repassword = $_POST['Repassword'];
$number = $_POST['number'];
$sql_query = "INSERTINTO entry_details

(FirstName,LastName,email,password,Repassword,number)
VALUES ('$FirstName', '$LastName', '$email', '$password', '$Repassword', '$number')";
if (mysqli_query($conn, $sql_query))
{
echo'<script>alert ("Data inserted Successfully”) </script>';
header ('location: loginform.php');
}
else
{
echo"Error: " .$sql ."" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
LOGIN PHP
<?php
$servername="localhost";
$username="root";
$password="";
$database_name="database123";
$conn=mysqli_connect($servername, $username,$password,$database_name);
//now check the connection
If (! $conn)
{
Die ("Connection Failed:”. mysqli_connect_error());
if(isset($_POST['save']))
{
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$email = $_POST['email'];
$password = $_POST['password'];
$Repassword = $_POST['Repassword'];
$number = $_POST['number'];
$sql_query = "INSERTINTO entry_details

(FirstName,LastName,email,password,Repassword,number)
VALUES ('$FirstName', '$LastName', '$email', '$password', '$Repassword', '$number')";
if (mysqli_query($conn, $sql_query))
{
echo'<script>alert ("Data inserted Successfully”) </script>';
header ('location: loginform.php');
}
else
{
echo"Error: “. $sql."“. mysqli_error($conn);
}
mysqli_close($conn);
}
?>
LOGIN FROM PHP
<!DOCTYPEhtml>
<html>
<head>
<title>Login-MaxWheels</title>
<linkrel="stylesheet"type="text/css"href="css\login.css">
<linkhref="https://fonts.googleapis.com/css?
family=Poppins:600&display=swap"rel="stylesheet">
<scriptsrc="https://kit.fontawesome.com/a81368914c.js"></script>
</head>
<body>
<headerclass="header">
<divid="menu-btn"class="fas fa-bars"></div>
<ahref="#"class="logo"><span>Max</span>Wheels </a>
</header>
<imgclass="wave"src="img\collection.jpg">
<divclass="container">
<divclass="img">
</div>
<divclass="login-content">
<formaction="login.php"method="post">
<h2class="title">Welcome</h2>
<divclass="input-div one">
<divclass="i">
<iclass="fas fa-user"></i>
</div>
<divclass="div">
<h5>Username</h5>
<inputtype="text"class="input"name="email"required>
</div>
</div>
<divclass="input-div pass">
<divclass="i">
<iclass="fas fa-lock"></i>
</div>
<divclass="div">
<h5>Password</h5>
<inputtype="password"class="input"name="password"required>
</div>
</div>
<ahref="#">Forgot Password? </a>
<inputtype="submit"class="btn"value="Login">
<inputtype="submit"class="btn1"value="SignUp"onclick="location. href='signup.php'">
</form>
</div>
</div>
<scripttype="text/javascript"src="js/main.js"></script>
</body>
</html>

SIGN TO PHP
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Sign-In</title>
<linkrel="stylesheet"href="css\signin.css">
</head>
<body>
<formaction="connect.php"method="POST"style="border:1px solid #ccc">
<divclass="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<labelfor="First name"><b>First Name</b></label>

<inputtype="text"placeholder="Enter your lirst name"name="FirstName"required>
<labelfor="Last name"><b>Last Name </b></label>

<inputtype="text"placeholder="Enter your last name"name="LastName"required>
<labelfor="email"><b>Email</b></label>
<inputtype="text"placeholder="Enter Email"name="email"required>
<labelfor="psw"><b>Password</b></label>
<inputtype="password"placeholder="Enter Password"name="password"required>
<labelfor="psw-repeat"><b>Repeat Password</b></label>
<inputtype="password"placeholder="Repeat Password"name="Repassword"required>
<labelfor="phn number"><b>Phone Number</b></label>

<inputtype="number"placeholder="phone number"name="number"required>
<label>
<inputtype="checkbox"checked="checked"name="remember"style="margin-bottom:15px">
Remember me
</label>
<divclass="clearfix">
<buttononclick="history. back()"type="button"class="cancelbtn">Cancel</button>
<inputtype="submit"name="save"class="signupbtn">
</div>
</div>
</form>
</body>
</html>
OUTPUT: -
QUES26: - HOW TO MAKE E-COMMERCE FILE IN JAVASCRIPT?
ANS:
-<linkhref='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css'rel='stylesheet'
>
<! -- ===== CSS ===== -->
<linkrel="stylesheet"href="assets/css/styles.css">
<title>Modern Responsive Ecommerce Website</title>

</head>
<body>
<! --===== HEADER =====-->
<headerclass="l-header">
<navclass="nav bd-grid">
<div>
<ahref="index.html"class="nav__logo">Rose <spanclass="nav__store">Store</span></a>
</div>
<divclass="nav__menu"id="nav-menu">
<ulclass="nav__list">
<liclass="nav__item"><ahref="#home"class="nav__link active">Home</a></li>
<liclass="nav__item"><ahref="#featured"class="nav__link">Featured</a></li>
<liclass="nav__item"><ahref="#new"class="nav__link">New Product</a></li>
<liclass="nav__item"><ahref="#subscribe"class="nav__link">Subscribe</a></li>
</ul>
</div>
<div>
<iclass='bxbx-cart nav__cart'></i>
<iclass='bxbx-menu nav__toggle'id="nav-toggle"></i>
</div>
</nav>
</header>
<mainclass="l-main">
<! --===== HOME =====-->
<sectionclass="home"id="home">
<divclass="home__container bd-grid">
<divclass="home__data">
<h1class="home__title">New <br><span>ARRIVALS</span></h1>
<ahref="#featured"class="button">GO SHOPPING</a>
</div>
<imgsrc="assets/img/home.png"alt=""class="home__img">
</div>
</section>
<! --===== COLLECTION =====-->

<sectionclass="collection section">
<divclass="collection__container bd-grid">
<divclass="collection__box">
<imgsrc="assets/img/backpackMan.png"alt=""class="collection__img">
<divclass="collection__data">
<h2class="collection__title">
<spanclass="collection__subtitle">Men</span><br>Backpack
</h2>
<ahref="#"class="collection__view">View Collection</a>
</div>
</div>
<divclass="collection__box">
<divclass="collection__data">
<h2class="collection__title">
<spanclass="collection__subtitle">Women</span><br>Backpack
</h2>
<ahref="#"class="collection__view">View Collection</a>
</div>
<imgsrc="assets/img/backpackWoman.png"alt=""class="collection__img">
</div>
</div>
</section>
<! --===== FEATURED PRODUCTS =====-->
<sectionclass="featured section"id="featured">
<h2class="section-title">FEATURED PRODUCTS</h2>
<ahref=""class="section-all">View All</a>
<divclass="featured__container bd-grid">
<divclass="featured__product">
<divclass="featured__box">
<divclass="featured__new">
NEW
</div>
<imgsrc="assets/img/feature1.png"alt=""class="featured__img">
</div>
<divclass="featured__data">
<h3class="featured__name">
Headphone One Black
</h3>
<spanclass="featured_price">$29</span>
</div>
</div>
NEW
</div>
</div>
Speaker Beats Pill
</h3>
</div>
</div>
NEW
</div>
</div>
Apple Air Pod
</h3>
</div>
</div>
NEW
</div>
</div>
Smartwatch F9 Negro
</h3>
</div>
</div>
</div>
</section>
<! --===== OFFER =====-->

<sectionclass="offer section">
<divclass="offer__bg">
<divclass="offer__data">
<h2class="offer__title">Special Offer</h2>
<pclass="offer__description">Special Offer discounts for Women.</p>
<ahref="#"class="button">SHOP NOW</a>
</div>
</div>
</section>
<! --===== NEW ARRIVALS =====-->

<sectionclass="featured section"id="new">
<h2class="section-title">NEW ARRIVALS</h2>
<ahref="#"class="section-all">View All</a>
<divclass="new__container bd-grid">
<divclass="new__box">
<imgsrc="assets/img/new1.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<! --===== NEWSLETTER =====-->
<sectionclass="newsletter section"id="subscribe">
<divclass="newsletter__container bd-grid">
<divclass="newsletter__subscribe">
<h2class="section-title">OUR NEWSLETTER</h2>
<pclass="newsletter__description">Promotion new products and sales for more market. </p>
<formclass="newsletter__form"action="">
<inputtype="text"name=""class="newsletter__input"placeholder="Enter Your Name">
<ahref="#"class="button">SUBSCRIBE</a>
</form>
</div>
</div>
</section>
<! --===== SPONSORS =====-->

<sectionclass="sponsors section">
<divclass="sponsors__container bd-grid">
<divclass="sponsors__logo">
<imgsrc="assets/img/logo1.png">
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<! --===== FOOTER =====-->
<footerclass="footer section">
<divclass="footer__container bd-grid">
<divclass="footer__box">
<h3class="footer__title">SARA</h3>
<pclass="footer__deal">Products Store</p>
<ahref="#"><imgsrc="assets/img/footerstore1.png"alt=""class="footer__store"></a>
<ahref="#"><imgsrc="assets/img/footerstore2.png"class="footer__store"></a>
</div>
<h3class="footer__title">EXPLORE</h3>
<ul>
<li><ahref="#"class="footer__link">Home</a></li>
<li><ahref="#"class="footer__link">Featured</a></li>
<li><ahref="#"class="footer__link">New</a></li>
<li><ahref="#"class="footer__link">Subscribe</a></li>
</ul>
</div>
<h3class="footer__title">OUR SERVICES</h3>
<ul>
<li><ahref="#"class="footer__link">Pricing</a></li>
<li><ahref="#"class="footer__link">Free Shipping</a></li>
<li><ahref="#"class="footer__link">Gift Cards</a></li>
</ul>
</div>
<h3class="footer__title">FOLLOW</h3>
<ahref="#"class="footer__social"><iclass='bxbxl-facebook-square'></i></a>
<ahref="#"class="footer__social"><iclass="bxbxl-instagram-alt"></i></a>
<ahref="#"class="footer__social"><iclass="bxbxl-twitter"></i></a>
</div>
</div>
<pclass="footer__copy">© 2021 copyright all right reserved. </p>
</footer>
<! --===== MAIN JS =====-->
<scriptsrc="assets/js/main.js"></script>
</body>
</html>
OUTPUT: -
QUES27: - HOW TO MAKE VALIDATE PROGRAM IN JAVASCRIPT?
ANS: - <html>
<head>
<script type="text/javascript">
function validate ()
{
if (document. form1.yourname.value. length<2)
{
alert ("please enter your full name")
}
If (document. form1.address.value. length<3)
{
Alert ("please enter yourfull address")
}
}
</script>
</head>
<body>
<form name="form1">
Name:<input type="text" name="yourname">
Adress:<input type="text" name="address">
<input type="button" value="submit"
onclick="validate ()">
</form>
</body>
</html>
OUTPUT: -
QUES28: - HOW TO MAKE FRAME IN JAVASCRIPT?
ANS: - <html>
<head>
<frameset cols="*, *">
<frame src="frame_1.html">
<title> frame 1</title>

</head>
<frameset rows="*, *">
<frameset cols="*, *">
</frameset>
</frameset>
</frameset>
</html>
OUTPUT: -
QUES29: - HOW TO MAKE CAR INDUSTRY IN JAVASCRIPT?
ANS: - <HTML>
<HEAD>
<TITLE> MANGLA car industry </TITLE>
</HEAD>
<BODY>
<U><B> Biggest company of india </B></U>
<BR>
<B> <I> Owner by RIDIT MANGLA</I> </B>
</BODY>
</HTML>
OUTPUT: -
QUES30: - HOW TO MAKE CELL PADDING I N JAVASCRIPT?

<html>
<head>
link rel="stylesheet" href="C:\Users\user\Desktop\hituu\HTML\css\style2.css">
<meta charset="utf-8">
<title>Setting Table Cellpadding via CSS</title>
<style>
body {background-color:pink;}
h1{color:red;}
table, th, td
{
border: 1px solid #666;
}
</style>
</head>
<body>
<p style="color:blue;">create table</ps>
<h1> MEWAT MODEL SCHOOL</h1>
<h2 class="color3" id="reg1" > Enter the name of the product to be
purchase</h2>
<h3 class="color3" id="reg2">registration details on your purchase</h3>
<h4 class="color3"> Enter the name of the product to be purchase</h4>
<h5 class="color3"> mode of payment</h5>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ANSHITA</td>
<td>MANGLA</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>GAURAV</td>
<td>CHHABRA</td>
</tr>
<tr>
<td>3</td>
<td>GORI</td>
<td>CHHABRA</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT: -
QUES31: - HOW TO MAKE AUDIO PROGRAM IN JAVASCRIPT?
ANS: -<!DOCTYPE HTML>

<HTML>
<HEAD>
<TITLE> AUDIO TAG</TITLE>
</HEAD>
<BODY>
<AUDIO autoplay loop controls >
<source src="F:\music\feeling\123.mp3"type="audio/mp3">
</AUDIO>
</BODY>
</HTML>
OUTPUT: -
QUES32: - HOW TO MAKE TYRE COMPANY IN JAVASCRIPT?
ANS: - <HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {COLOR: BLUE;}
. blink
{
animation: blinker 0.6s linear infinite;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
@Keyframes blinker
{
50% {opacity: 0;
}
}
. blink-one {
animation: blinker-one 1s linear infinite;
}
@Keyframes blinker-one {
0% {opacity: 0;
}
}
. blink-two {
animation: blinker-two 1.4s linear infinite;
}
@Keyframes blinker-two {
100% {opacity: 0;
}
}
</STYLE>
</HEAD>
<TITLE> APOLLO TYRE </TITLE>
<BODY>
<marquee behavior="scroll" direction="right"><H1> APOLLO TYRE.
</H1></marquee></p>
<marquee behavior="scroll" direction="left"><H2> APOLLO TYRE.
</H2></marquee>
<marquee behavior="scroll" direction="up"><H3> APOLLO TYRE.
</H3></marquee>
<marquee behavior="scroll" direction="down"><H4> APOLLO TYRE.
</H4></marquee>
<marquee behavior="scroll" direction="right" scrollamount="20"><H5> APOLLO
TYRE. </H5></marquee>
<marquee behavior="scroll" direction="left" scrollamount="50"><H6> APOLLO
TYRE. </H6></marquee>
<p class="blink">Blinking text</p>
<p class="blink blink-one"><U><B> BIGGEST COMPANY OF MEWAT
</B></U></p>
<p class="blink blink-two"><B> <I> OWNER BY MUKESH MANGLA 100%</I>
</B></p>
</BODY>
</HTML>
OUTPUT: -
QUES33: - HOW TO MAKE CALCULATOR IN JAVASCRIPT?

<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1
{
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#Clear
{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
. formstyle
{
Width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#Calc
{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> ANSHITA CALCULATOR </h1>
<div class= "formstyle">
<form name = "form1">
<! -- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<! -- Display the calculator button on the screen. -->
<! – onclick () function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>

<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>

<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<! -- When we click on the '=' button, the onclick() shows the sum results on the calculator
screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eva
l(form1.answer.value) ">
<br>
<! -- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear"
>
<br>
</form>
</div>
</body>
</html>
OUTPUT: -
QUES34: - HOW TO MAKE HIDE AND SHOW PROGRAM IN
JAVASCRIPT?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document). Ready (function ()
{
$("#hide"). Click (function ()
{
$("p"). hide ();
});
$("#show"). Click
(Function ()
{
$("p"). show ();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear. </p>
<p>Click me away! </p>
<p>Click me too! </p>
<button id="hide">hide</button>
<button id="show">show</button>
</body>
</html>
OUTPUT: -
QUES35: - HOW TO MAKE FOCUSE PROGRAM IN JAVASCRIPT?
ANS: -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document). ready (function ()
{
$("input"). Focus (function ()
{
$(this).css("background-color", "Black");
});
$("input"). Blur (function ()
{
$(this).css ("background-color", "Blue");
});
})
</script>
</head>
<body>
name:<input type="text" name="full name"><br>
email:<input type="text" name="email">
</body>
</html>
OUTPUT: -
QUES36: - HOW TO MAKE CLICK PROGRAM IN JAVASCRIPT?
ANS: -
<!doctype html>
<html>
<head>
<title> progaram for jquery</title>
<script src="text-align: center;">
</script>
<script>
$(document). ready (function ()
{
$("p"). click (function ()
{
$(this). hide ();
});
});
</script>
</head>
<body>
<p> hide all element</p>
<p> this is a paragraph</p>
<p> this is another paragraph</p>
</body>
</html>
OUTPUT: -
QUES37: - HOW TO MAKE ARRAY IN JAVASCRIPT?
ANS: -
<script>
var i;
var emp = new Array ();
emp [0] = "GAURAV";
emp [1] = "ANSHI";
emp [2] = "CHHABRA";
for (i=0; i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
OUTPUT: -
QUES38: - HOW TO MAKE MATH SQUARE ROOT PROGRAM IN
JAVASCRIPT?
ANS: -
Square Root of 20is: <span id="p1"></span>
<script>
document.getElementById('p1').innerHTML=Math.sqrt(20);
</script>
OUTPUT: -
QUES39: HOW TO MAKE DATE PROGRAM IN JAVASCRIPT?
ANS: -
<script>
var date=new Date ();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
</script>
OUTPUT: -
QUES40: - HOW TO MAKE CALENDAR PROGRAM IN
JAVASCRIPT?
<html>
<head>

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
</script>

<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/
nJGzIxFDsf4x0xIM+B07jRM"
</script>

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
</script>
</head>
<body>

<div class="container" style="max-width: 250px;">
<div class="form-group m-1">
<label class="font-weight-bold" for="dob">
Date of Birth:
</label>

<div class="input-group date">

<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-calendar"
onclick="setDatepicker(this)">
</i>
</span>
</span>

<input class="form-control" type="text"
name="dob" id="dob" value="">
</div>
</div>
</div>

<script type="text/javascript">
function setDatepicker(_this)
{
/* Get the parent class name so we
can show date picker */
let className = $(_this).parent()
.parent().parent().attr('class');
// Remove space and add '.'

let removeSpace = className.replace(' ', '.');
// jQuery class selector
$("." + removeSpace).datepicker({
format: "dd/mm/yyyy",
// Positioning where the calendar is placed
orientation: "bottom auto",
// Calendar closes when cursor is
// clicked outside the calendar
autoclose: true,
showOnFocus: "false"
});
}
</script>
</body>
</html>
OUTPUT: -

Anshita Web Tech

Uploaded by

Copyright:

Available Formats

Anshita Web Tech

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Anshita Web Tech

Uploaded by

Copyright:

Available Formats

QUES1: - HOW TO MAKE FORM PROGRAM IN HTML?

<label> Firstname </label>

ANS: - <!DOCTYPE html>

ANS: - <h1>Heading no. 1</h1>

ANS: - <body style="text-align: center;">

ANS: - <!DOCTYPE html>

ANS: - <!DOCTYPE html>

/* var () function used here */

ANS: - <h3 style="color: red;

padding-top: 25px;">Learning HTML using Inline CSS</h3>

ANS: - <!DOCTYPE html>

ANS: - <!DOCTYPE html>

ANS: - <!DOCTYPE html>

ANS: - <!DOCTYPE HTML>

ANS: - /*===== MENU SHOW =====*/

/*===== REMOVE MENU MOBILE =====*/

// Remove Menu Mobile

$conn=mysqli_connect ($servername, $username, $password, $database_name);

$sql_query = "INSERTINTO entry_details

$sql_query = "INSERTINTO entry_details

<labelfor="First name"><b>First Name</b></label>

<labelfor="Last name"><b>Last Name </b></label>

<labelfor="phn number"><b>Phone Number</b></label>

<title>Modern Responsive Ecommerce Website</title>

<! --===== COLLECTION =====-->

<! --===== OFFER =====-->

<! --===== NEW ARRIVALS =====-->

<! --===== SPONSORS =====-->

<title> frame 1</title>

ANS: - <!DOCTYPE html>

ANS: -<!DOCTYPE HTML>

ANS: - <!DOCTYPE html>

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">

<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">

ANS: - <!DOCTYPE html>

ANS: - <!DOCTYPE html>

// Remove space and add '.'

You might also like

ANS: - /===== MENU SHOW =====/

/===== REMOVE MENU MOBILE =====/