[go: up one dir, main page]
Scribd
Upload
137 views86 pages

Anshita Web Tech

The document provides code snippets for common HTML elements and features like forms, tables, lists, headings, and links in response to questions. It also includes examples of using CSS for styling pages.

Uploaded by

Yachna Sharma
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
137 views86 pages

Anshita Web Tech

The document provides code snippets for common HTML elements and features like forms, tables, lists, headings, and links in response to questions. It also includes examples of using CSS for styling pages.

Uploaded by

Yachna Sharma
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/ 86

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>
<td colspan="2" width="200" height="15" align="center">
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>
<td colspan="2" width="200" height="15" align="center">
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>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>

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?

ANS: - <!DOCTYPE html>


<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?

ANS: - <!DOCTYPE html>


<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?

ANS: - <!DOCTYPE html>


<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?

ANS: - <!DOCTYPE html>


<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?

ANS: - <!DOCTYPE html>


<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>
      <!--
       document. Write ("Hello World!")
     //-->
     </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/boxicons@2.0.5/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>
<divclass="featured__product">
<divclass="featured__box">
<divclass="featured__new">
NEW
</div>
<imgsrc="assets/img/feature2.png"alt=""class="featured__img">
</div>
<divclass="featured__data">
<h3class="featured__name">
Speaker Beats Pill
</h3>
<spanclass="featured_price">$89</span>
</div>
</div>
<divclass="featured__product">
<divclass="featured__box">
<divclass="featured__new">
NEW
</div>
<imgsrc="assets/img/feature3.png"alt=""class="featured__img">
</div>
<divclass="featured__data">
<h3class="featured__name">
Apple Air Pod
</h3>
<spanclass="featured_price">$129</span>
</div>
</div>
<divclass="featured__product">
<divclass="featured__box">
<divclass="featured__new">
NEW
</div>
<imgsrc="assets/img/feature4.png"alt=""class="featured__img">
</div>
<divclass="featured__data">
<h3class="featured__name">
Smartwatch F9 Negro
</h3>
<spanclass="featured_price">$99</span>
</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>
<divclass="new__box">
<imgsrc="assets/img/new2.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</div>
</div>
<divclass="new__box">
<imgsrc="assets/img/new3.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</div>
</div>
<divclass="new__box">
<imgsrc="assets/img/new4.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</div>
</div>
<divclass="new__box">
<imgsrc="assets/img/new5.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</div>
</div>
<divclass="new__box">
<imgsrc="assets/img/new6.png"alt=""class="new__img">
<divclass="new__link">
<ahref=""class="button">VIEW PRODUCT</a>
</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>
<divclass="sponsors__logo">
<imgsrc="assets/img/logo2.png">
</div>
<divclass="sponsors__logo">
<imgsrc="assets/img/logo3.png">
</div>
<divclass="sponsors__logo">
<imgsrc="assets/img/logo4.png">
</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>
<divclass="footer__box">
<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>
<divclass="footer__box">
<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>
<divclass="footer__box">
<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">&#169; 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="*, *">
<frame src="frame_2.html">
<frameset cols="*, *">
<frame src="frame_3.html">
<frame src="frame_4.html">
</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?

ANS: - <!DOCTYPE html>


<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>manglaanshi0212@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>GAURAV</td>
<td>CHHABRA</td>
<td>gauravchhabra720@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>GORI</td>
<td>CHHABRA</td>
<td>gauravchhabra399@mail.com</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?

ANS: - <!DOCTYPE html>


<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 = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>

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


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

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


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

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


<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<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?

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 ()
{
$("#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?

ANS: - <!DOCTYPE html>

<html>
<head>
<!-- Importing jquery cdn -->
<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"
crossorigin="anonymous">
</script>
<!-- Importing icon cdn -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Importing core bootstrap cdn -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/
nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<!-- Importing datepicker cdn -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
</script>
</head>
<body>
<!-- Container class contains the date field -->
<div class="container" style="max-width: 250px;">
<div class="form-group m-1">
<label class="font-weight-bold" for="dob">
Date of Birth:
</label>
<!-- Input field along with
calendar icon and -->
<div class="input-group date">
<!-- Sets the calendar icon -->
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-calendar"
onclick="setDatepicker(this)">
</i>
</span>
</span>
<!-- Accepts the input from calendar -->
<input class="form-control" type="text"
name="dob" id="dob" value="">
</div>
</div>
</div>
<!-- JavaScript to control the actions
of the date picker -->
<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: -

You might also like