HOW TO CREATE A SIMPLE LOGIN PAGE USING HTML AND CSS

Onyemechi1 — Fri, 13 Jan 2023 21:44:30 +0000

Introduction to HTML and CSS:

HTML(Hypertext Mark-up Language) it is a basic foundation for building a webpage. It is used to display text, image, audio, video etc. HTML is not case sensitive and it is the basis and basic language in programming language. HTML is WORA(Write Once Run Anywhere).

CSS(Cascading Stylesheet) it is used to style HTML document. It describes how HTML element are to be displayed. It is used for beautifying a code written in Html. CSS can be classified into 3 namely:
Internal CSS
External CSS
Inline CSS

STEPS INVOLVED

Step 1
Create a New folder and name it Login

Step 2
Open any programming environment you have e.g Notepad++., Dreamweaver, Sublime text, Visual studio. I will be making use of Sublime text. Open a new file and save it as login page.html in your already created login folder

Step 3
HTML algorithm to display a login page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>creating a login page</title>
    <link rel="stylesheet" href="Login page.css">
</head>
<body>
    <h1><u>LOGIN PAGE</u></h1>
    <div>
    <form action="text" method="Get" enctype="form-data">
        <label for="username">Username</label><br>
        <input type="text" name="username" placeholder="Username"><br><br>
        <label for="Pwd">Password</label><br>
        <input type="Password" name="Password"><br><br>
        <input type="submit" name="login">
    </form>
</div>
</body>
</html>

Step 4
Open another new file and name it login page.css

Step 5
Link your html code to your css code

Step 6
Css code to style the login page

body{
    background:cyan;
    margin:0;
    padding: 0;
}
h1{
    font-family:sans-serif;
    text-align:center;
}
form{
    text-align:center;
}
label{
    font-family:cursive;
    font-size:16px;
}
input{
    font-size:18px;
}

Step 7
After successfully saving your code, you will then right-click on your login page.html and click on "Open in Browser" and it will open on your default browser and the outcome of your code will be displayed

Conclusion

We have successfully created a simple login page using HTML and CSS. I hope u find this little article easy and implementable.

DEV Community: Onyemechi1

HOW TO CREATE A SIMPLE LOGIN PAGE USING HTML AND CSS

Introduction to HTML and CSS:

STEPS INVOLVED

Conclusion