Question
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!!
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!!
Answers
GPT-4o mini
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)
```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)
```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.
### Part 1: HTML (index.html)
```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)
```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.