【解決方法】Web ページを作成してスタイルを設定するにはどうすればよいですか

手順は次のとおりです。

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.
Objectives

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.

私が試したこと：

HTML

<title> Ana Carolina

    <div>
        <h1> Ana Carolina</h1>
        <div>
            
            <div>
                <ul>
                    <li>Justin Bieber</li>                    <li>Jão</li>                    <li>Metallica</li>                    <li>One Direction</li>                    <li>Demi Lovato</li>                </ul>
                <div>
                    <h2> Favorite Films</h2>
                    <ol>
                        <li>Para todos garotos que já amei</li>                        <li>Bingo</li>                        <li>Big Daddy</li>                        <li> Shrek 3</li>                        <li> Moana</li>                    </ol>
                    <div>
                        <a href="https://www.facebook.com/">My Profile</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS部分：

CSS

>image{
    border: 4px solid green
}
h1{
    color:blue
}
h2{
    color: grey
}
body{
    margin: 4px;
}

そして、実際には得られないこのエラーを表示します。

The following tests failed:

✗ There should be 5 <div> tags in the <body>
✗ The 1st <div> tag should have a margin of 4px
✗ There should be a 2nd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 3rd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 4th <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 5th <div> tag in the <body> tag (+ 4 related tests)

解決策 1

手順を読んでください – 非常に具体的です:

命令

Add five divider elements to the body element.

それはありません。body 要素には 1 つの DIV タグが含まれており、合計 5 つの DIV タグが含まれています。 入れ子になった DIV タグ:

HTML

<div>
    <div>
        <div>
            <div>
                <div>
                </div>
            </div>
        </div>
    </div>
</div>

それはこれと同じではありません:

HTML

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

等々。
意味をなす？