मैं एक वेबपेज कैसे बनाऊं और उसे कैसे स्टाइल करूं?

निर्देश हैं:

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.

मैंने क्या प्रयास किया है:

एचटीएमएल

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

सीएसएस भाग:

सीएसएस

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

आपके पास वह नहीं है: आपके पास एक बॉडी तत्व है जिसमें एक DIV टैग है, और कुल मिलाकर पांच हैं नेस्ट डीआईवी टैग:

एचटीएमएल

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

यह इसके समान नहीं है:

एचटीएमएल

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

और इसी तरह।
सही बात?

समाधान 1

コメント