Using the information provided in class and from your textbook, create a valid HTML page named index.html. Add the following information as the content to the web page,

An h1 tag with your name (10 pts)
A div tag with your hometown and State name (e.g. Statesboro, GA) (10 pts)
A p tag with the name of your high school (10 pts)
A personal photo of yourself with appropriate size (make sure we can see your smiley face) (10 pts) - Don't forget to submit the image file with your index.html file
A p tag with an introduction of yourself beneath the photo (you can copy your introduction under Discussion) (10 pts)

1 answer

Here's a basic example of how you can structure your index.html file based on your requirements. Make sure to replace the placeholders with your own information (name, hometown, high school, personal photo, and introduction).

HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name's Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #photo {
            width: 200px; /* Adjust size as needed */
            height: auto; 
            border-radius: 10px; /* Optional: Add rounded corners */
        }
    </style>
</head>
<body>

    <h1>Your Name</h1>
    
    <div>
        Hometown and State: Your Hometown, Your State
    </div>
    
    <p>High School: Your High School Name</p>
    
    <img id="photo" src="your_photo.jpg" alt="A photo of Your Name" />
    
    <p>
        Hello! My name is Your Name. I am a student from Your Hometown. I enjoy activities such as reading, hiking, and spending time with friends and family. I am excited to learn new things and look forward to what the future holds!
    </p>

</body>
</html>

Instructions to Complete:

  1. Replace placeholders: Make sure to replace:

    • "Your Name" with your name.
    • "Your Hometown, Your State" with your actual hometown and state (e.g., "Statesboro, GA").
    • "Your High School Name" with your high school name.
    • "your_photo.jpg" with the actual filename of your personal photo.
    • The introductory paragraph with your actual introduction.
  2. Image File: Make sure to save your personal photo in the same directory as index.html, and ensure that the filename matches what you wrote in the src attribute of the img tag.

  3. Testing Your HTML Page: Open the index.html file in a web browser to view the page and check that everything is displayed correctly.

  4. Submission: When you are ready to submit, make sure to include both index.html and your image file in the same folder.

Feel free to add more styles or elements as you see fit!