activités chapitre 23

PREMIERE NSI

activité 23.1

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Informatique lycée</title>
</head>

<body>
    <header>
        <nav>
            <a href="https://pixees.fr/informatiquelycee/sec/index.html" target="_blank">SNT</a>
            <a href="https://pixees.fr/informatiquelycee/prem/index.html" target="_blank">NSI PREMIÈRE</a>
            <a href="https://pixees.fr/informatiquelycee/term/index.html" target="_blank">NSI TERMINALE</a>
        </nav>
    </header>
    <div class="content">
        <h1>INFORMATIQUE LYCÉE</h1>
        <hr>
        <h2>SNT - NSI</h2>
    </div>
</body>

</html>
@font-face {
    font-family: "cormorant";
    src: url("url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');");
}
* {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Georgia, sans-serif;
}

/*************************************header****************************************/
header {
    background-color: rgb(42, 42, 42, 0.4);
    position: fixed;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

header h2 {
    color: white;
    margin-right: 40px;
}


header nav {
    margin-left: 40px;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav a {
    list-style: none;
    text-decoration: none;
    color: white;

}

/*************************************content****************************************/

.content {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("image/bg.jpg") center;
}

.content h1 {
    color: white;
    text-align: center;
    padding-top: 250px;
    margin-bottom: 90px;
    letter-spacing: 1.4rem;
    font-size: 6rem;
    font-family: 'cormorant';
    font-weight: 100;
}

.content h2 {
    color: white;
    text-align: center;
    letter-spacing: 2rem;
    font-size: 4rem;
    font-family: 'cormorant';
    margin-top: 100px;
    font-weight: 100;
}

.content hr {
    margin: 0 auto;
    width: 20%;
}

Cliquez sur le fichier index.html afin de pouvoir visualiser le résultat dans votre navigateur Web

Il n'est pas question de comprendre l'ensemble du code ci-dessus, mais vous pouvez apporter des modifications à ce code (HTML et/ou CSS) afin de visualiser les effets de ces modifications. Vous pouvez aussi carrément supprimer le fichier CSS et visualiser les effets de cette suppression.

activité 23.2

Élaborez une page HTML en utilisant les balises obligatoirement les balises suivantes :

Il faudra styliser votre page avec du CSS