Slide 1 Slide 2 Slide 3 Slide 4 Slide 5

Module 1: HTML - Practice Exercise

byAmurChem -
0
Module 1: HTML - Practice Exercise

Exercise: Creating a Simple Web Page

Question:

Create a simple web page with the following elements:

  1. Title: "Welcome to My Website"
  2. Heading: "Introduction"
  3. Paragraph: "This is my first website. Welcome!"
  4. Link: "Click here to learn more" linking to "https://www.example.com"
  5. Image: An image of your choice with alt text "My Website Logo"

Solution:


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="Description of your website">
            <meta name="keywords" content="keywords, for, SEO">
            <meta name="author" content="Your Name">
            <title>Welcome to My Website</title>
        </head>
        <body>
            <h1>Introduction</h1>
            <p>This is my first website. Welcome!</p>
            <a href="https://www.example.com" title="Learn More">Click here to learn more</a>
            <img src="logo.jpg" alt="My Website Logo">
        </body>
        </html>

Exercise 2: Creating a Contact Form

Question:

Design a contact form with fields for name, email, subject, and message.

Solution:


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="Contact Form">
            <meta name="keywords" content="contact, form, HTML">
            <meta name="author" content="Your Name">
            <title>Contact Us</title>
        </head>
        <body>
            <h1>Contact Us</h1>
            <form action="#" method="post">
                <label for="name">Name:</label><br>
                <input type="text" id="name" name="name" required><br><br>
                <label for="email">Email:</label><br>
                <input type="email" id="email" name="email" required><br><br>
                <label for="subject">Subject:</label><br>
                <input type="text" id="subject" name="subject" required><br><br>
                <label for="message">Message:</label><br>
                <textarea id="message" name="message" rows="4" required></textarea><br><br>
                <input type="submit" value="Submit">
            </form>
        </body>
        </html>

Exercise 3: Creating a List

Question:

Create an ordered list of your top 5 favorite movies.

Solution:


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="List of Favorite Movies">
            <meta name="keywords" content="movies, favorites, HTML">
            <meta name="author" content="Your Name">
            <title>My Favorite Movies</title>
        </head>
        <body>
            <h1>My Favorite Movies</h1>
            <ol>
                <li>The Shawshank Redemption</li>
                <li>The Godfather</li>
                <li>The Dark Knight</li>
                <li>Pulp Fiction</li>
                <li>Forrest Gump</li>
            </ol>
        </body>
        </html>

SEO Considerations:

  1. Meta Tags: Use meta tags like description, keywords, and author to provide metadata about your webpage.
  2. Semantic HTML: Use semantic HTML elements (<header>, <nav>, <footer>, etc.) where appropriate for better SEO.
  3. Optimized Images: Use descriptive file names and alt attributes for images to improve accessibility and SEO.
  4. Content Quality: Ensure your content is relevant, high-quality, and original to rank better in search engine results.
  5. Mobile Responsiveness: Ensure your website is mobile-friendly, as Google prioritizes mobile-friendly websites in search results.

🔗 Other Useful Links

© 2025 AmurChem. All rights reserved.

Tags

You may like these posts

Post a Comment

Previous Post Next Post