Activité

activité 23.1

créez un répertoire nommé site_web dans votre répertoire de travail
créez un fichier index.html dans le répertoire site_web
créez un fichier style.css dans le répertoire site_web
créez un répertoire image dans le répertoire site_web
copiez-collez l'image que vous téléchargerez ici dans le répertoire image que vous venez de créez
copiez-collez le code HTML suivant dans le fichier index.html

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

copiez-collez le code CSS suivant dans le fichier style.css

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

h1
h2
p
img
a
form
label
input
button

Il faudra styliser votre page avec du CSS