Comment créer et styliser une page Web

[ad_1]

Les instructions sont :

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.

Ce que j’ai essayé :

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>

Partie CSS :

CSS

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

Et montrez ces erreurs que je n’obtiens vraiment pas :

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)

Solution 1

Lisez les instructions, elles sont très spécifiques :

Instruction

Add five divider elements to the body element.

Vous n’avez pas cela : vous avez un élément body contenant une balise DIV et un total de cinq imbriqué Balises DIV :

HTML

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

Ce n’est pas la même chose que ça :

HTML

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

Et ainsi de suite.
Cela a du sens ?

[ad_2]