HTML Tags and Their Uses:
HTML Code Functions:
1. <!DOCTYPE html>: Declares the document type and version of HTML being used
(HTML5 in this
case).
2. <html
lang="en">: The
root element that
wraps all the
content. The lang
attribute specifies
the language of
the document
(English in this
case).
3. <head>: Contains
meta-information
about the HTML
document, such as
the title, character
set, and links to
stylesheets.
4. <meta
charset="UTF-
8">: Specifies the character encoding for the HTML document (UTF-8).
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Sets the viewport properties for responsive web design, ensuring the page scales well
on different devices.
6. <title>Registration Form</title>: Sets the title of the web page, which is
displayed in the browser's title bar or tab.
7. <link rel="stylesheet" href="styles.css">: Links the external CSS file
(styles.css) to the HTML document, allowing the styles defined in the CSS file to
be applied.
8. <body>: Contains the main content of the HTML document.
9. <div class="container">: Creates a division or section of content. The
class="container" attribute assigns a class name that can be used to apply CSS
styles.
10. <h2>Registration Form</h2>: Defines a level 2 heading with the text "Registration
Form".
11. <form action="#" method="post">: Creates a form for user input. The action="#"
attribute specifies the URL where the form data will be sent (currently a
placeholder), and the method="post" attribute specifies that form data should be
sent using the POST method.
12. <label for="username">Username:</label>: Defines a label for the username
input field. The for="username" attribute associates the label with the input field
that has the ID "username".
13. <input type="text" id="username" name="username" required>: Defines an
input field for text. The type="text" attribute specifies that this is a text input field,
the id="username" attribute assigns an ID to the field, the name="username"
attribute provides a name for the field, and the required attribute indicates that
this field must be filled out before submitting the form.
14. <input type="email" id="email" name="email" required>: Defines an input
field for email. The type="email" attribute specifies that this is an email input field.
15. <input type="password" id="password" name="password" required>: Defines
an input field for the password. The type="password" attribute specifies that this is
a password input field.
16. <input type="password" id="confirm-password" name="confirm-password"
required>: Defines an input field for confirming the password. The id="confirm-
password" attribute assigns an ID to the field.
17. <button type="submit">Register</button>: Defines a button that submits the
form when clicked. The type="submit" attribute specifies that this is a submit
button.
CSS Code Functions:
1. * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial,
sans-serif; }: Applies universal styles to all elements. box-sizing: border-box
ensures that padding and border are included in the element's total width and
height. margin: 0 and padding: 0 remove default margin and padding. font-
family: Arial, sans-serif sets the default font.
2. body { background-color: #f2f2f2; display: flex; justify-content:
center; align-items: center; height: 100vh; }: Styles the <body> element.
background-color: #f2f2f2 sets the background color. display: flex; justify-
content: center; align-items: center; centers the content using Flexbox.
height: 100vh sets the height to 100% of the viewport height.
3. .container { background-color: #fff; padding: 20px; box-shadow: 0 0
10px rgba(0, 0, 0, 0.1); border-radius: 10px; width: 300px; }: Styles the
element with the class "container". background-color: #fff sets the background
color. padding: 20px adds padding inside the container. box-shadow: 0 0 10px
rgba(0, 0, 0, 0.1) adds a subtle shadow around the container. border-radius:
10px rounds the corners. width: 300px sets the container's width.
4. h2 { text-align: center; margin-bottom: 20px; }: Styles the <h2> element.
text-align: center centers the text. margin-bottom: 20px adds space below the
heading.
5. label { margin-top: 10px; display: block; font-weight: bold; }: Styles the
<label> element. margin-top: 10px adds space above each label. display: block
makes the label a block-level element. font-weight: bold makes the label text bold.
6. input[type="text"], input[type="email"], input[type="password"] {
width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 20px;
border: 1px solid #ccc; border-radius: 5px; }: Styles the text, email, and
password input fields. width: 100% makes the input fields fill the container's width.
padding: 10px adds padding inside the input fields. margin-top: 5px and margin-
bottom: 20px add space above and below the input fields. border: 1px solid #ccc
adds a border around the input fields. border-radius: 5px rounds the corners.
7. button { width: 100%; padding: 10px; background-color: #4CAF50; color:
white; border: none; border-radius: 5px; cursor: pointer; }: Styles the
<button> element. width: 100% makes the button fill the container's width.
padding: 10px adds padding inside the button. background-color: #4CAF50 sets
the button's background color. color: white sets the text color. border: none
removes the border. border-radius: 5px rounds the corners. cursor: pointer
changes the cursor to a pointer when hovering over the button.
8. button:hover { background-color: #45a049; }: Adds a hover effect to the
button. background-color: #45a049 changes the background color when the
button is hovered over.
