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:

index.html (Home page)
contact.html (Contact Us page)
register.html (Registration page)
login.html (Login page)

MyFirstWebsite/
│
├── index.html
├── contact.html
├── register.html
├── login.html
└── main.css
Note:
why the main HTML file is named index.html

1. Default Behavior: Most web servers automatically serve index.html when a directory is accessed (e.g., http://example.com/).
2. Organizational Convention: It clearly indicates the starting point of a website, making projects easier to navigate.
3. SEO and Usability: Enhances usability for users and search engines by providing a clear homepage.
4. Historical Context: This naming convention has been widely accepted since the early days of the web.

Using index.html ensures compatibility with hosting services and improves site navigation.

File Content

index.html
<!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>&copy; 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.
contact.html
<!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>&copy; 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. The value attribute can change the button text to something more descriptive, like "Send".
register.html
<!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>&copy; 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.
login.html
<!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>&copy; 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.

main.css
/* 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: flex property 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
Output:

Login Page:







Comments

Post a Comment

Popular posts from this blog

Formatting MySQL Dates

Image
MySQL's DATE_FORMAT() function provides a wide range of format codes that you can use to represent date and time values in various formats.  It allows you to format a date or datetime value as a string using custom formatting. DATE_FORMAT(date, format) date: The date or datetime value you want to format. format: A string specifying the desired format for the output. This string can include special format codes that represent various components of the date and time (e.g., %Y for the year, %m for the month, %d for the day, %H for the hour, %i for the minute, %s for the second, etc.). SELECT DATE_FORMAT('2023-09-03', '%M %d, %Y'); // returns 'September 03, 2023'. Here is a list of commonly used format codes along with examples: %Y: Four-digit year (e.g., '2023'). %y: Two-digit year (e.g., '23' for 2023). %m: Month (01-12). %c: Month (1-12). %d: Day of the month (01-31). %e: Day of the month (1-31). %H: Hour (00-23). %h: Hour (01-12). %I: Hou...
Read more

SOAP Explained: With Javascript

What is SOAP? SOAP is like a set of rules that helps different computer programs talk to each other. Imagine you have two friends who speak different languages. SOAP is like a universal translator that helps them understand each other. Now, when these programs talk, they use a special type of text called XML. It's like a format that's easy for both programs to read, like having a conversation in a language that both friends understand. So, SOAP is kind of like a language translator for computers, and XML is the language they use to communicate. This way, even if two programs are running on completely different systems, they can still understand each other and share information. SOAP Request A SOAP request consists of a SOAP envelope that contains the SOAP header and the SOAP body. Here's a basic example of what a simple XML request in SOAP might look. <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope     xmlns:soapenv="http://schemas...
Read more