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:
-
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.
-
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 thesrc
attribute of theimg
tag. -
Testing Your HTML Page: Open the
index.html
file in a web browser to view the page and check that everything is displayed correctly. -
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!