Programming Assignment: Create and style a webpage

Task 1: Create the HTML file.

Objectives

Add photo.jpg to the webpage.
Add your name as a heading to the webpage.
Add an unordered list of your five favorite music artists.
Add an ordered list of your top five favorite films.
Add a hyperlink to your Facebook profile, or, meta.com.

Follow the Step by Step instructions below:

Open the index.html file and set up the following basic HTML document structure:

 <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 </body>
 </html>

Set the title of the HTML document to your name:

 <!DOCTYPE html>
 <html>
 <head>
     <title>your name</title>
 </head>
 <body>
 </body>
 </html>

Link to styles.css in the head element.
Add five divider elements to the body element.
Add a heading 1 to the first divider element that displays your name.
Add photo.jpg using an image element in the second divider element..
Add an ID attribute with the value photo on the image element.
Add a heading 2 for Favorite Music Artists in the third divider element. In the same divider add an unordered list with your top 5 favorite artists.
Add a heading 2 for Favorite Films in the fourth divider element. In the same divider add an ordered list with your top 5 favorite films.
Add a hyperlink to your Facebook profile page in the last divider element. Alternatively, add a hyperlink to https://www.meta.com/. As a last step, add My Profile to the descriptive text of the <a> tag.

Task 2: Style the webpage using CSS.

Style the webpage using CSS.

Follow the Step by Step instructions below:

Open the styles.css file.
Add a CSS rule for your image that sets the border property to 2 pixels wide with a solid blue color.
Add a CSS rule for heading 1 containing your name and set its color to blue.
Add a CSS rule for all <h2> headings and set their color to grey.
Add a CSS rule that applies a margin of 4 pixels to the divider elements.

Final Step: Let's submit your code!

Nice work! To complete this assessment:

Save your file through File -> Save
Select "Submit Assignment" in your Lab toolbar.

Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.

Tips

Make sure that HTML tags are closed properly.
Use a different heading type for your name.
Remember the box model.
Review the lessons Creating a HTML document, Adding Images, Selecting and Styling, and Different types of selectors.

<!DOCTYPE html>
<html>
<head>
    <title>Your Name</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div>
        <h1>Your Name</h1>
    </div>
    <div>
        <img id="photo" src="photo.jpg" alt="Your Photo">
    </div>
    <div>
        <h2>Favorite Music Artists</h2>
        <ul>
            <li>Artist 1</li>
            <li>Artist 2</li>
            <li>Artist 3</li>
            <li>Artist 4</li>
            <li>Artist 5</li>
        </ul>
    </div>
    <div>
        <h2>Favorite Films</h2>
        <ol>
            <li>Film 1</li>
            <li>Film 2</li>
            <li>Film 3</li>
            <li>Film 4</li>
            <li>Film 5</li>
        </ol>
    </div>
    <div>
        <a href="https://www.meta.com/">My Profile</a>
    </div>
</body>
</html>

/* Add a CSS rule for the image */
#photo {
    border: 2px solid blue;
}

/* Add a CSS rule for heading 1 containing your name */
h1 {
    color: blue;
}

/* Add a CSS rule for all <h2> headings */
h2 {
    color: grey;
}

/* Add a CSS rule for the div elements */
div {
    margin: 4px;
}