Friday, 31 January 2025

Create Login Page in HTML

 

HTML Login Form

A login form is one of the most vital features in web development. It makes it possible to identify users and, based on that identification, either admit entry to a private area or block it.

  • To standard field Architecture, such a form usually combines a field for input of a username or e-mail address with another field for a password. It features a button to log in. More often than not, the form would allow new users to signup or register.
  • When the user clicks the submit button the form sends back what was entered to the server. The server then verifies that the credentials are correct. In case of matching login details with the stored data, access will be permitted to secure content on the site. If the details are wrong an error message will be shown. The user can then try again.
  • This is an important HTML login form that would work in securing Web applications. It provides access

Step 1: Setting Up the HTML Document

The very first thing you need to do is to set up the HTML document. Open your favourite code editor. Create a new file. Add the basic HTML structure. Include the necessary tags. Get started


Syntax:

<html>

<head>

<titile>Title Name</titile>

</head>

<body>

//... data

</body>

</html>

Step 2: Adding Input Fields

Inside the form element, add two input fields. One for username. Another is for the password. The input tag uses type="text." This is for the username. Type="password" is for the password. Different labels are also good. Accessibility is important in both fields.

Step 3: Next, Add a Submit Button

Put a form submit button with general incorporation of the <button> component with type="submit" This will make it possible for the user to submit form data to the server. This button should be clearly labeled regarding its function. For example, "Login" or "Submit".


Example:

<-- HyperText Markup Language-->

 <html>

<--to store metadata about a web page-->

<head>

<--to define the title of a document.-->

<title>Login Page</title>

</head>

<--to define the main content of a web page-->

<body>

Enter User Name: <input type="text"><br><br>

Enter Password: <input type="Password"><br>

<button>Submit</button> <button>Cancle</button>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------------                                                                   Output:


Posted by at No comments:
Labels:

Thursday, 30 January 2025

Write a program Image Maping

 Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:


<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">

  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

</map>

</body>

</html>

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

Syntax:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

  • rect - defines a rectangular region
  • circle - defines a circular region
  • poly - defines a polygonal region
  • default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image. 

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Shape="poly"

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">

  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">

</map>

<script>

function myFunction() {

  alert("You clicked the data name!");

}

</script>

</body>

</html>

Chapter Summary

  • Use the HTML <map> element to define an image map
  • Use the HTML <area> element to define the clickable areas in the image map
  • Use the HTML usemap attribute of the <img> element to point to an image map
Posted by at No comments:
Labels:

HTML Styles - CSS

 

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes

Using CSS(TYPES OF CSS)

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file

  • Inline CSS

    An inline CSS is used to apply a unique style to a single HTML element.

    An inline CSS uses the style attribute of an HTML element.

    EXAMPLE

    <!DOCTYPE html>

    <html>

    <body>

    <h1 style="color:blue;">A Blue Heading</h1>

    <p style="color:red;">A red paragraph.</p>

    </body>

    </html>

  • Internal CSS

    An internal CSS is used to define a style for a single HTML page.

    An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

    The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color: 

    EXAMPLE

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {background-color: blue;}

    h1   {color: gray;}

    p    {color: pink;}

    </style>

    </head>

    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph.</p>

    </body>

    </html>

  • External CSS

    An external style sheet is used to define the style for many HTML pages.

    To use an external style sheet, add a link to it in the <head> section of each HTML page:

  • EXAMPLE 
  • HTML FILE
  • <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
  • CSS FILE
  • EXAMPLE
  • body {
  •   background-color: powderblue;
    }
    h1 {
      color: blue;
    }
    p {
      color: red;
    }
Posted by at No comments:
Labels:

Sunday, 12 January 2025

Write a program Design web Page using HTML

<-- HyperText Markup Language-->

 <html>

<--to store metadata about a web page-->

<head>

<--to define the title of a document.-->

<title>Login Page</title>

</head>

<--to define the main content of a web page-->

<body>

<body align="center">

 

    <h1 style="color: red;">Home Page</h1>

    <table border="1" width="1000px;" height="50px;" align="center"> 

      <tr>

      <td><a href="Home">Home</td>

      <td><a href="Login Page">Login Page</td>

      <td><a href="Registration">Registration</td>

      <td><a href="Images">Images</td>

      <td><a href="Linking">Linking</td>

</tr>

<table border="1" width="1000PX;" height="50px;" align="center">


<tr><td><marquee>

  <img src="D:\Bloger\1.jpg">

  <img src="2.jpg">

  <img src="3.jpg">

  <img src="4.jpg">

  <img src="5.jpg"></marquee>

</td></tr>

</table>

<table border="1" width="1000px;" height="100px;" align="center">

  <tr>

    <td width="300" style="color:#a569bd">Attenntion

      <p>This Branch Under Science Faculty</p></td>

    <td width="400" style="color:#2874a6">Notification

      <p>Admission Open<br>BCA<br>BBA<br>MBA<br></p></td>

    <td width="300" style="color:#5dade2">News

      <marquee direction="up"><p> 

जिजाऊ माँ साहेब व स्वामी विवेकानंद जयंती - कार्यक्रमाचे.<br>

PhD Admission Notice in Botany & Biotechnology 2025.<br>


31st Raman Memorial Conference - 2025 at Department of Physics, "Quantum Science & Technology (पूंजकीय विज्ञान आणि तंत्रज्ञान)"<br>


PhD Admission Notice 2025 Biotechnology SPPU<br>


</p></td>

  </tr>

</table>

    </table>

</body>

</html>


Posted by at No comments:
Labels:

Write a program to Password length 6 char using JavaScript

<-- HyperText Markup Language-->

 <html>

<--to store metadata about a web page-->

<head>

<--to define the title of a document.-->


    <title>Form Validation</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f4f4f4;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }

        .form-container {

            background-color: #fff;

            padding: 20px;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

            border-radius: 8px;

            width: 300px;

        }

        h2 {

            text-align: center;

        }

        label {

            display: block;

            margin-bottom: 5px;

        }

        input[type="text"],

        input[type="email"],

        input[type="password"] {

            width: 100%;

            padding: 8px;

            margin-bottom: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

        input[type="submit"] {

            width: 100%;

            padding: 10px;

            background-color: #4CAF50;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        input[type="submit"]:hover {

            background-color: #45a049;

        }

        .error {

            color: red;

            font-size: 0.9em;

        }

    </style>

</head>

<body>


    <div class="form-container">

        <h2>Registration Form</h2>

        <form id="registrationForm" onsubmit="return validateForm()">

            <!-- Name Field -->

            <label for="name">Full Name:</label>

            <input type="text" id="name" name="name">

            <span id="nameError" class="error"></span>


            <!-- Email Field -->

            <label for="email">Email:</label>

            <input type="email" id="email" name="email">

            <span id="emailError" class="error"></span>


            <!-- Password Field -->

            <label for="password">Password:</label>

            <input type="password" id="password" name="password">

            <span id="passwordError" class="error"></span>


            <!-- Confirm Password Field -->

            <label for="confirmPassword">Confirm Password:</label>

            <input type="password" id="confirmPassword" name="confirmPassword">

            <span id="confirmPasswordError" class="error"></span>


            <!-- Submit Button -->

            <input type="submit" value="Submit">

        </form>

    </div>


    <script>

        function validateForm() {

            // Clear previous error messages

            document.getElementById('nameError').innerText = '';

            document.getElementById('emailError').innerText = '';

            document.getElementById('passwordError').innerText = '';

            document.getElementById('confirmPasswordError').innerText = '';


            let isValid = true;


            // Get form values

            let name = document.getElementById('name').value;

            let email = document.getElementById('email').value;

            let password = document.getElementById('password').value;

            let confirmPassword = document.getElementById('confirmPassword').value;


            // Name Validation: check if empty

            if (name === '') {

                document.getElementById('nameError').innerText = 'Name is required.';

                isValid = false;

            }


            // Email Validation: check if empty and valid format

            let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

            if (email === '') {

                document.getElementById('emailError').innerText = 'Email is required.';

                isValid = false;

            } else if (!emailPattern.test(email)) {

                document.getElementById('emailError').innerText = 'Please enter a valid email address.';

                isValid = false;

            }


            // Password Validation: check if empty and length is at least 6 characters

            if (password === '') {

                document.getElementById('passwordError').innerText = 'Password is required.';

                isValid = false;

            } else if (password.length < 6) {

                document.getElementById('passwordError').innerText = 'Password must be at least 6 characters long.';

                isValid = false;

            }


            // Confirm Password Validation: check if it matches the password

            if (confirmPassword === '') {

                document.getElementById('confirmPasswordError').innerText = 'Please confirm your password.';

                isValid = false;

            } else if (confirmPassword !== password) {

                document.getElementById('confirmPasswordError').innerText = 'Passwords do not match.';

                isValid = false;

            }


            return isValid; // Return false to prevent form submission if validation fails

        }

    </script>


</body>

</html>



Posted by at No comments:
Labels:

Write a program to Check Password Confirmation using JavaScript

 <html>

<head>

    <style>

        .PC {

            font-size: 40px;

            color: green;

            font-weight: bold;

            text-align: center;

        }

        .cs {

            font-size: 17px;

            text-align: center;

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

    <div class="PC">Password Confirmation</div>

    <div class="cs">computer science </div>

    <form onSubmit="return checkPassword(this)">

        <table border=1 align="center">

            <tr>

                <!-- Enter Username -->

                <td>Username:</td>

                <td><input type=text name=name size=25></td>

            </tr>

            <tr>

                <!-- Enter Password. -->

                <td>Password:</td>

                <td><input type=password name=password1 size=25></td>

            </tr>

            <tr>

                <!-- To Confirm Password. -->

                <td>Confirm Password:</td>

                <td><input type=password name=password2 size=25></td>

            </tr>

            <tr>

                <td colspan=2 align=right>

                    <input type=submit value="Submit">

                </td>

            </tr>

        </table>

    </form>

    <script>

        // Function to check Whether both passwords

        // is same or not.

        function checkPassword(form) {

            password1 = form.password1.value;

            password2 = form.password2.value;

 

            // If password not entered

            if (password1 == '')

                alert("Please enter Password");

            // If confirm password not entered

            else if (password2 == '')

                alert("Please enter confirm password");

            // If Not same return False.    

            else if (password1 != password2) {

                alert("\nPassword did not match: Please try again...")

                return false;

            }

            // If same return True.

            else {

                alert("Password Match: Welcome to Our Page.....")

                return true;

            }

        }

    </script>

</body>

</html>


Posted by at No comments:
Labels:

Thursday, 9 January 2025

Write a program Event Handling

 

<html>

<body>

<h1>JavaScript HTML Events</h1>

<h2>The onclick Attribute</h2>


<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>


<p id="demo"></p>


</body>

</html>









Posted by at No comments:
Labels:

Sunday, 29 December 2024

Write a program Validation using Javascript

 <html>

<head>

<script>

function myFunction() {

  // Get the value of the input field with id="numb"

  let x = document.getElementById("numb").value;

  // If x is Not a Number or less than one or greater than 10

  let text;

  if (isNaN(x) || x < 1 || x > 10) {

    text = "Input not valid";

  } else {

    text = "Input OK";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>

</head>

<body>

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

</body>

</html> 
















Posted by at No comments:
Labels:

Thursday, 26 December 2024

Write a program Count Vowels using Javascript

<html>

<head>

<title>find number of vowels in a string in JavaScript</title>

<script type="text/javascript">

function GetVowels() {

var str = document.getElementById('txtname').value;

var count = 0, total_vowels="";

for (var i = 0; i < str.length; i++) {

if (str.charAt(i).match(/[a-zA-Z]/) != null) {

// findVowels

if (str.charAt(i).match(/[aeiouAEIOU]/))

{

total_vowels = total_vowels + str.charAt(i);

count++;

}

}

}

document.getElementById('vowels').value = total_vowels;

document.getElementById('vcount').value = count;

}

</script>

</head>

<body>

<div >

<table border="1px" cellspacing="0" width="30%" style="background-color: #FF6600; color:White">

<tr><td colspan="2" align="center"><b>Get Vowels from String</b></td></tr>

<tr>

<td>Enter Text :</td>

<td><input type='text' id='txtname' /></td>

</tr>

<tr>

<td>Vowels Count :</td>

<td><input type='text' readonly="readonly" id='vcount'/></td>

</tr>

<tr>

<td>Total Vowels :</td>

<td><input type='text' readonly="readonly" id='vowels' /></td>

</tr>

<tr>

<td></td>

<td><input type='button' value='Get Vowels Count' onclick="javascript:GetVowels();" /></td>

</tr>

</table>

</div>

</body>

</html>








Posted by at No comments:
Labels:

Wednesday, 18 December 2024

Write Program To Subtract Two number using javascript

 <!doctype html>

<html>

<head>

<script>

function Sub()

{

  var numOne, numTwo, sum;

  numOne = parseInt(document.getElementById("first").value);

  numTwo = parseInt(document.getElementById("second").value);

  sum = numOne - numTwo;

  document.getElementById("answer").value = sum;

}

</script>

</head>

<body>

<p>Enter the First Number: <input id="first"></p>

<p>Enter the Second Number: <input id="second"></p>

<button onclick="Sub()">Sub</button>

<p>Sum = <input id="answer"></p>

</body>

</html>















Posted by at No comments:
Labels:

Write Program To Add Two number using javascript

 


<!doctype html>

<html>

<head>

<script>

function add()

{

  var numOne, numTwo, sum;

  numOne = parseInt(document.getElementById("first").value);

  numTwo = parseInt(document.getElementById("second").value);

  sum = numOne + numTwo;

  document.getElementById("answer").value = sum;

}

</script>

</head>

<body>


<p>Enter the First Number: <input id="first"></p>

<p>Enter the Second Number: <input id="second"></p>

<button onclick="add()">Add</button>

<p>Sum = <input id="answer"></p>


</body>

</html>

Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)

Data Science using Spreadsheet Software Assignment 3

Printing Workbooks select the cells you want to print and then set that area as the print area   Steps to set a print area: Select the cells...