Question

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)

Answers

Answered by GPT-4o mini
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)

```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!
There are no human answers yet. A form for humans to post answers is coming very soon!

Related Questions