Create your first website with Home, Contact us, Register, Login Pages
Create a Folder Structure for Your Website
1. Create a folder named 
MyFirstWebsite.2. Inside the MyFirstWebsite folder, create the following HTML files:
MyFirstWebsite/
│
├── index.html
├── contact.html
├── register.html
├── login.html
└── main.css
why the main HTML file is named
index.html
File Content
<!DOCTYPE html> <!-- Defines the document type and version of HTML -->
<html>
<head>
<title>My Website</title> <!-- The title of your webpage that appears in the browser tab -->
<link rel="stylesheet" href="main.css"> <!-- Links to an external CSS file for styling -->
</head>
<body>
<nav> <!-- Navigation bar for linking to different pages -->
<a href="/">Home</a> <!-- Link to the Home page -->
<a href="contact.html">Contact Us</a> <!-- Link to the Contact Us page -->
<a href="login.html">Login</a> <!-- Link to the Login page -->
<a href="register.html">Register</a> <!-- Link to the Register page -->
</nav>
<h1>Home Page</h1> <!-- Main heading for the Home page -->
<footer> <!-- Footer section of the webpage -->
<p>© 2024 My Website. All rights reserved.</p> <!-- Copyright notice -->
</footer>
</body>
</html>
Explained:
<!DOCTYPE html>: This declaration defines the document as an HTML5 document, which helps browsers render it correctly.<head>: Contains meta-information about the HTML document, including the title and links to stylesheets.<title>: Sets the title that appears on the browser tab.<link>: Links to an external CSS file (for styling your webpage) but should not have a closing</link>.<nav>: The navigation section where you provide links to different pages of your website.<a>: Anchor tag, used to create hyperlinks to other pages.<h1>: Main heading for the content of your page; typically the largest and most important heading.<footer>: Contains footer information, such as copyright notices and other relevant links or information.
<!DOCTYPE html> <!-- Defines the document type and version of HTML -->
<html lang="en"> <!-- Specifies the language of the document -->
<head>
<meta charset="UTF-8"> <!-- Sets the character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper scaling on different devices -->
<title>Contact Us</title> <!-- The title of the webpage that appears in the browser tab -->
<link rel="stylesheet" href="main.css"> <!-- Links to an external CSS file for styling (no closing </link> needed) -->
</head>
<body>
<nav> <!-- Navigation bar for linking to different pages -->
<a href="/">Home</a> <!-- Link to the Home page -->
<a href="contact.html">Contact Us</a> <!-- Link to the Contact Us page -->
<a href="login.html">Login</a> <!-- Link to the Login page -->
<a href="register.html">Register</a> <!-- Link to the Register page -->
</nav>
<h1>Contact Us Page</h1> <!-- Main heading for the Contact Us page -->
<form> <!-- Form for users to submit their contact information -->
<input type="email" id="email" placeholder="Your Email" required> <!-- Email input field (required) -->
<textarea id="message" placeholder="Message" required></textarea> <!-- Textarea for the user's message (required) -->
<input type="submit" value="Send"> <!-- Submit button to send the form data -->
</form>
<footer> <!-- Footer section of the webpage -->
<p>© 2024 My Website. All rights reserved.</p> <!-- Copyright notice -->
</footer>
</body>
</html>
Explained:
<html lang="en">: Specifies that the content of the document is in English, which helps with accessibility and search engines.<meta charset="UTF-8">: Ensures the document can display any characters in the UTF-8 character set.<meta name="viewport">: Makes the webpage responsive, scaling properly on mobile devices.<form>: The form element that allows users to enter and submit their information.<input type="email">: Input field specifically for email addresses, providing basic validation.<textarea>: A multi-line input field for longer messages.<input type="submit">: Button that submits the form. Thevalueattribute can change the button text to something more descriptive, like "Send".
<!DOCTYPE html> <!-- Defines the document type and version of HTML -->
<html lang="en"> <!-- Specifies the language of the document -->
<head>
<meta charset="UTF-8"> <!-- Sets the character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper scaling on different devices -->
<title>Register</title> <!-- The title of the webpage that appears in the browser tab -->
<link rel="stylesheet" href="main.css"> <!-- Links to an external CSS file for styling (no closing </link> needed) -->
</head>
<body>
<nav> <!-- Navigation bar for linking to different pages -->
<a href="/">Home</a> <!-- Link to the Home page -->
<a href="contact.html">Contact Us</a> <!-- Link to the Contact Us page -->
<a href="login.html">Login</a> <!-- Link to the Login page -->
<a href="register.html">Register</a> <!-- Link to the Register page -->
</nav>
<h1>Register Page</h1> <!-- Main heading for the Register page -->
<form> <!-- Form for users to enter their registration details -->
<input type="text" id="username" placeholder="Your Name" required> <!-- Input for the user's name (required) -->
<input type="email" id="useremail" placeholder="Your Email" required> <!-- Input for the user's email (required) -->
<input type="password" id="password" placeholder="Password" required> <!-- Input for the password (required) -->
<input type="password" id="confirmpassword" placeholder="Confirm Password" required> <!-- Input for confirming the password (required) -->
<input type="submit" value="Register"> <!-- Submit button for the form -->
</form>
<footer> <!-- Footer section of the webpage -->
<p>© 2024 My Website. All rights reserved.</p> <!-- Copyright notice -->
</footer>
</body>
</html>
Explained:
<html lang="en">: Specifies that the document is in English, which aids accessibility and SEO.<meta charset="UTF-8">: Ensures the document can correctly display any characters from the UTF-8 character set.<meta name="viewport">: Makes the webpage responsive, so it displays well on mobile devices.<form>: Encloses the registration fields where users can input their details.<input type="text">: Input field for the user's name, marked as required to ensure it's filled out.<input type="email">: Input field specifically for email addresses, providing basic validation and marked as required.<input type="password">: Input fields for the user's password and password confirmation, both marked as required.<input type="submit">: Button that submits the registration form; its value attribute defines the button text.
<!DOCTYPE html>
<html lang="en"> <!-- Specifies the language of the document -->
<head>
<meta charset="UTF-8"> <!-- Sets the character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper scaling on different devices -->
<title>Login</title> <!-- The title of the webpage that appears in the browser tab -->
<link rel="stylesheet" href="main.css"> <!-- Links to an external CSS file for styling (no closing </link> needed) -->
</head>
<body>
<nav> <!-- Navigation bar for linking to different pages -->
<a href="/">Home</a> <!-- Link to the Home page -->
<a href="contact.html">Contact Us</a> <!-- Link to the Contact Us page -->
<a href="login.html">Login</a> <!-- Link to the Login page -->
<a href="register.html">Register</a> <!-- Link to the Register page -->
</nav>
<h1>Login Page</h1> <!-- Main heading for the Login page -->
<form> <!-- Form for users to enter their login details -->
<input type="email" id="useremail" placeholder="Your Email" required> <!-- Input for the user's email (required) -->
<input type="password" id="password" placeholder="Password" required> <!-- Input for the user's password (required) -->
<input type="submit" value="Login"> <!-- Submit button for the form -->
</form>
<footer> <!-- Footer section of the webpage -->
<p>© 2024 My Website. All rights reserved.</p> <!-- Copyright notice -->
</footer>
</body>
</html>
Explained:
<html lang="en">: Indicates that the document is in English, which helps with accessibility and search engine optimization.<meta charset="UTF-8">: Ensures that the document can correctly display any characters from the UTF-8 character set.<meta name="viewport">: Makes the webpage responsive so it displays well on mobile devices.<form>: Encloses the login fields where users can input their credentials.<input type="email">: Input field specifically for email addresses, marked as required to ensure it's filled out correctly.<input type="password">: Input field for the user's password, also marked as required to ensure it's provided.<input type="submit">: Button that submits the login form; its value attribute specifies the button text.
/* Styles for the navigation bar */
nav {
display: flex; /* Uses flexbox layout for the navigation */
justify-content: end; /* Aligns the navigation links to the right */
}
nav a {
margin: 0 10px; /* Adds horizontal spacing between the links */
}
/* Styles for the form */
form {
display: flex; /* Uses flexbox layout for the form */
flex-direction: column; /* Stacks form elements vertically */
gap: 10px; /* Adds space between the form elements */
align-items: center; /* Centers the form elements horizontally */
}
/* Styles for input fields with specific IDs */
#email, #message {
width: 300px; /* Sets a fixed width for the email and message fields */
}
/* Styles for the footer */
footer {
position: fixed; /* Keeps the footer at the bottom of the viewport */
bottom: 0; /* Positions the footer at the bottom */
width: 100%; /* Makes the footer span the full width of the page */
}
/* Styles for paragraph in the footer */
footer p {
display: flex; /* Uses flexbox for the footer paragraph */
justify-content: center; /* Centers the text horizontally */
}
Explained:
- Flexbox Layout: The
display: flexproperty is used to create a flexible layout for the navigation and form elements, allowing easy alignment and spacing. justify-content: Aligns items along the main axis (horizontal in this case).flex-direction: column: Stacks child elements vertically.gap: Provides consistent spacing between items in a flex container.- Fixed Positioning
Login Page:
 |
Comments
Post a Comment