Ask a New Question
Menu

Part 1: HMTL create a valid HTML page named index.html

An h1 tag with your name (Put Mariyah)
A div tag with your hometown and State name (Put Atlanta, GA)
A p tag with the name of your high school (Put Rockdale County High School)
A personal photo of yourself with appropriate size (make sure we can see your smiley face) - 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)

Part 2: Create a CSS style sheet

Center aligned the tags h1, div, and p
Apply the white background color to the HTML tag
Apply the light blue background color to the body tag; set its width to 600px; and create a 2px dotted grey border around all elements inside the body.
Apply the Tahoma font and red color to your hometown; change its size to 40px.

Make sure the formatting is completely correct with no errors!!

1 answer

Here’s a simple example of an HTML page (index.html) and a corresponding CSS stylesheet (styles.css) that meets the requirements you've outlined for your project.

Part 1: HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Mariyah's Page</title>
</head>
<body>
    <h1>Mariyah</h1>
    <div class="hometown">Atlanta, GA</div>
    <p>Rockdale County High School</p>
    <img src="your-photo.jpg" alt="A smiling photo of Mariyah" class="profile-photo">
    <p>Hello! My name is Mariyah and I am excited to share a little about myself. I enjoy learning and discovering new things. I have a passion for technology and love to engage in creative projects.</p>
</body>
</html>

Part 2: CSS (styles.css)

html {
    background-color: white;
}

body {
    background-color: lightblue;
    width: 600px;
    border: 2px dotted grey;
    margin: 0 auto; /* Centers the body */
    padding: 20px;
}

h1, .hometown, p {
    text-align: center;
}

.hometown {
    font-family: Tahoma;
    color: red;
    font-size: 40px;
}

.profile-photo {
    display: block; /* Centers the image */
    margin: 0 auto; /* Centers the image horizontally */
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
}

Image File

Make sure to place your image in the same directory as your HTML file and name it your-photo.jpg. This is the image that will be displayed in the HTML file.

Final Notes

  1. Ensure your HTML file (index.html) and CSS file (styles.css) are saved in the same folder.
  2. Replace "your-photo.jpg" with the actual filename of your image.
  3. Open index.html in a web browser to see your page rendered.

This structure keeps the code organized, fulfills the requirements you provided, and adheres to best practices for HTML and CSS formatting.