Tuesday, October 31, 2023

HTML paragraph tag

   HTML paragraph Tag 




paragraph tag html


Patagraph  Tag




Use the paragraph tag 

 

 1]  The <p> tag defines a paragraph tag.

 2]   Browsers automatically add a single blank line before and after each <p> element.
         it defines a paragraph of text.

 3]  The paragraph tag end of the paragraph is marked by opening  <p>  a closing </p>  tag 

 4]  <p> tag is a block element used to designate  a paragraph. useful the internet browsers          adda bit of margin before and after element.
 
 5]  The paragraph tag is align (left, right, center, justify)   with specific text alignment                 within a paragraph

 6]   <p> tag is used to define block level element that creates a new block of text.



Syntax


<P>.......... information type  here https://webdesigningtheory.blogspot.com/?m=1 .....</p>



PROGRAM  Name :HTML  paragraph tag


                 Example 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
  p tag defines a paragraph browsers
automatically add  a single blank
line befor and after each
https://webdesigningtheory.blogspot.com/?m=1
    </p>
</body>
</html>  




visit the link

HTML LOGIN FORM

HTML COMMENTS TAG

on No comments:
Labels:

Monday, October 30, 2023

how to add comments tag in html


 How To Add Comment In Html

  

html comments tag

Comment Tag

 Importance of HTML  Comment tag 


       1]   comment tag are some extra information  or code written in your code give extra explanation about the code and not visible to the user. 

       2]   comment tag are not displayed in the any browsers. comment tag use to the                                   programmer.

       3]    programmer you can use comments  tag to explain your code, help you code is edit                and change  the source code .comment of any code easy to understand in the                      programmer.

        4]    comment tag use to notes to remind yourself the build  process. you could                               explain the intended functionality of a section of code for another  Multiple                          developer  or your future self ensures quick and efficient understanding  of                              complex codes.

Syntax:-

 
<!-- 

   tag before the code and a after the code

 -->
  

 

Type of  HTML comments tag :-


1]  single line comments in HTML
2]  Multi-Line Comments in HTML



1]  single line comments in HTML :-


  HTML code also comments single lines at a time. in single line comment can use 
  one line description /information about the code .


Syntax

     
       <!--  There is some text  related to your program  -->

      
<h1>heading name program</h1>  
    <!-- <h2> topic name Webdesigningtheory.blogspot.com</h2>-->
               


2]  Multi-Line Comments in HTML

           The HTML code we can also comments multiple lines at a time code write in the program. multiline comment use any description multiple line code to debug etc.
   
       Syntax :- 

          <!--
              your code is comment
              write information
              in your project code
             Webdesigningtheory.blogspot.com
                -->

   
 <h2>command to html</h2>  
    <!-- <h2>extra  Information to related topic
project name
information
home page, contact use,create
website Webdesigningtheory.blogspot.com -->
               



visit the link



on No comments:
Labels:

Saturday, October 28, 2023

Customer Login Form

 

    Creating Sample

simple  Customer Login Form Using HTML


 

Customer Login Form

Customer login form



visit the website Extra information  Knowledge


https://webdesigningtheory.blogspot.com/2023/09/html-table-design.html


PROGRAM : Customer Login  form :-


                 CODE  THIS PROGRAME 


<html>  
<head>  
<meta name="viewport" content="
width=device-width, initial-scale=1">  
<title> Login Page </title>  
<style>  
Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color: pink ;  
}  

body {
  background-image:url ="https://drive
.google.com/file/d/1RMKNDIdqJSs4PTAZO6p47
VmC_MXWsplC/view?usp=drivesdk" ("background6.jpg");
}

button {  
       background-color: 357Ec7;
       width: 100%;  
        color: black ;  
        padding: 15px;  
        margin: 10px 0px;  
        border: none;  
        cursor: pointer;  
         }  
 form {  
        border: 3px solid #f1f1f1;  
    }  
 input[type=text], input[type=password]
 {  
        width: 100%;  
        margin: 8px 0;  
        padding: 12px 20px;  
        display: inline-block;  
        border: 2px solid   #F660AB;  
        box-sizing: border-box;  
    }  
 button:hover {  
        opacity: 0.7;  
    }  
  .cancelbtn {  
        width: auto;  
        padding: 10px 18px;  
        margin: 10px 5px;  
    }  
       
     
 .container {  
        padding: 25px;  
        background-color: FCDFFF;  
    }  
</style>  
</head>    
<body>    
    <center> <h1> Customer  Login Form </h1>
</center>  
    <form>  
        <div class="container">  
            <label>Username : </label>  
            <input type="text" placeholder=
"Enter Username" name="username" required>
            <label>Password : </label>  
            <input type="password" placeholder=
"Enter Password" name="password" required>
             <button type="submit"> <input
type="submit"
              onclick="check(this.form)"
name="btn_submit"
             value="Login"></button>
            <input type="checkbox"
checked="checked"> Remember me  
            <button type="button"
class="cancelbtn"> Cancel</button>  
            Forgot <a href="#"> password? </a>  
        </div>  
    </form>    
</body>    
<script type="text/javascript">
         var message="Right Click Disabled!";
               function rtclickcheck(keyp)  {
        if (navigator.appName == "Netscape"  &&
                           keyp.which == 3)  {
                              alert(message);
                               return false;
                      }
      if (navigator.appVersion.indexOf("MSIE")
 != -1 && event .button == 2)  {
                               alert(message);
                           return false;
                      }
}
         document.onmousedown = rtclickcheck;
         function check(form)  {
   

if  (form.username.value ==  "admin"
&& form.password.value == "123")  {
       window.open("https:https://
www.tripadvisor.in/Attraction_Review-g12456442
-d2293365-Reviews-Kas_Plateau-Kas_Satara_Distric
t_Maharashtra.html ")
      } else  {
        alert("Username or Password Doesn't
Match!");
   }
}
</script>
</html>
on No comments:
Labels:

Thursday, October 26, 2023

Creating Sample Login Form Using HTMLand CSS

Creating Sample Login Form Using HTML


 Login Form


Login form

What is a login form?

 

Login forms are used in almost every website and Application. A login form utilizes the credentials of a user, in order to authenticate their access. It generally consists of the typical username or email and password. But more fields can be added to improve the site's security


PROGRAM :CODE

Login form







<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Raleway, sans-serif;
}

body {
    background: linear-gradient(90deg, #c1bbf3);        
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.screen {      
    background: linear-gradient(90deg,  #a09af8);      
    position: relative;
    height: 600px;
    width: 360px;  
    box-shadow: 0px 0px 24px #5C5696;
}

.screen__content {
    z-index: 1;
    position: relative;
    height: 100%;
}

.screen__background {      
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);  
}

.screen__background__shape {
    transform: rotate(45deg);
    position: absolute;
}

.screen__background__shape1 {
    height: 520px;
    width: 520px;
    background: #FFF;  
    top: -50px;
    right: 120px;  
    border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
    height: 220px;
    width: 220px;
    background: #6C63AC;    
    top: -172px;
    right: 0;  
    border-radius: 32px;
}

.screen__background__shape3 {
    height: 540px;
    width: 190px;
    background: linear-gradient(270deg, #5D54A4, #6A679E);
    top: -24px;
    right: 0;  
    border-radius: 32px;
}

.screen__background__shape4 {
    height: 400px;
    width: 200px;
    background: #aba7fa;    
    top: 420px;
    right: 50px;    
    border-radius: 60px;
}

.login {
    width: 320px;
    padding: 30px;
    padding-top: 156px;
}

.login__field {
    padding: 20px 0px;  
    position: relative;
}

.login__icon {
    position: absolute;
    top: 30px;
    color: #7875B5;
}

.login__input {
    border: none;
    border-bottom: 2px solid #D1D1D4;
    background: none;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 75%;
    transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
    outline: none;
    border-bottom-color: #6A679E;
}

.login__submit {
    background: #fff;
    font-size: 14px;
    margin-top: 30px;
    padding: 16px 20px;
    border-radius: 26px;
    border: 1px solid #D4D3E8;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 100%;
    color: #4C489D;
    box-shadow: 0px 2px 2px  rgb(40, 205, 205);
    cursor: pointer;
    transition: .2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
    border-color: #6A679E;
    outline: none;
}

.button__icon {
    font-size: 24px;
    margin-left: auto;
    color: #7875B5;
}

.social-login {
    position: absolute;
    height: 140px;
    width: 160px;
    text-align: center;
    bottom: 0px;
    right: 0px;
    color: #fff;
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-login__icon {
    padding: 20px 10px;
    color: #fff;
    text-decoration: none;  
    text-shadow: 0px 0px 8px #7875B5;
}

.social-login__icon:hover {
    transform: scale(1.5);  
}
  </style>
</head>
<body>
   

    <div class="container">
        <div class="screen">
            <div class="screen__content">
                <form class="login">
                    <div class="login__field">
                       
                        <span class="button_
_text "><h2>Login Form </h2></span><br><br>
                        <i class="login__icon
fas fa-user"></i>
                        <input type="text"
class="login__input" placeholder="User name
/ Email">
                    </div>
                    <div class="login__field">
                        <i class="login__icon
fas fa-lock"></i>
                        <input type="password"
class="login__input" placeholder="Password">
                    </div>
                    <button class="button
login__submit">
                        <span class="button_
_text">Log In Now</span>
                        <i class="button__icon
fas fa-chevron-right"></i>
                    </button>              
                </form>
                <div class="social-login">
                   
                    <div class="social-icons">
                        <a href="#" class="
social-login__icon fab fa-instagram"></a>
                        <a href="#" class="
social-login__icon fab fa-facebook"></a>
                        <a href="#" class="
social-login__icon fab fa-twitter"></a>
                    </div>
                </div>
            </div>
            <div class="screen__background">
                <span class="screen__background
__shape screen__background__shape4"></span>
                <span class="screen__background
__shape screen__background__shape3"></span>      
                <span class="screen__background
__shape screen__background__shape2"></span>
                <span class="screen__background
__shape screen__background__shape1"></span>
            </div>      
        </div>
    </div>

</body>
</html>


visit website link👌👇👇👍

how-to-create-contact-us-form

html-iframe

file upload html

line break html

blog post html

on No comments:
Labels:
Subscribe to: Posts (Atom)