code un site html simple avec titre paragraphe et colonne liens Voici un exemple simple de site HTML avec un titre, un paragraphe et une colonne de liens :
```
<!DOCTYPE html>
<html>
  <head>
    <title>Mon site web simple</title>
  </head>
  <body>
    <h1>Titre de mon site</h1>
    <p>Voici un paragraphe de texte pour mon site web simple.</p>
    <h2>Liens utiles</h2>
    <ul>
      <li><a href="https://www.google.com/">Google</a></li>
      <li><a href="https://www.wikipedia.org/">Wikipedia</a></li>
      <li><a href="https://www.github.com/">GitHub</a></li>
    </ul>
  </body>
</html>
```
Ceci est un exemple basique avec un en-tête HTML `<head>` qui contient le titre de la page, et un corps HTML `<body>` avec des éléments HTML comme un titre principal `<h1>`, un paragraphe `<p>` et une liste de liens `<ul>` avec chaque lien étant représenté par un élément `<li>` contenant un lien `<a>`. Maintenant rajoute du CSS à ce site, pour que les liens soient d'un fond gris et deviennent bleus quand on passe la souris dessus. 
De plus le titre doit être en haut de la page le paragraphe au milieu et les liens à la toute fin.
Pour apporter les modifications demandées à votre site HTML simple, vous pouvez ajouter du code CSS dans la balise `<head>` de votre fichier HTML. J'ai ajouté les styles CSS nécessaires pour répondre à vos besoins :

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Mon site web simple</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }

      h1 {
        margin-top: 0;
      }

      p {
        flex: 1;
        text-align: center;
      }

      ul {
        margin-bottom: 0;
      }

      a {
        background-color: gray;
        color: white;
        text-decoration: none;
        padding: 5px;
      }

      a:hover {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Titre de mon site</h1>
    <p>Voici un paragraphe de texte pour mon site web simple.</p>
    <h2>Liens utiles</h2>
    <ul>
      <li><a href="https://www.google.com/">Google</a></li>
      <li><a href="https://www.wikipedia.org/">Wikipedia</a></li>
      <li><a href="https://www.github.com/">GitHub</a></li>
    </ul>
  </body>
</html>
```

Ce code CSS positionne le titre en haut de la page, le paragraphe au milieu et les liens à la fin. Les liens ont un fond gris et deviennent bleus lorsqu'on passe la souris dessus.
voici le nouveau HTML avec son fichier CSS

```html 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <title>Mon site web simple</title>
  </head>
  <body>
    <h1>Titre de mon site</h1>
    <p>Voici un paragraphe de texte pour mon site web simple.</p>
    <h2>Liens utiles</h2>
    <ul>
      <li><a href="https://www.google.com/">Google</a></li>
      <li><a href="https://www.wikipedia.org/">Wikipedia</a></li>
      <li><a href="https://www.github.com/">GitHub</a></li>
    </ul>
  </body>
</html> 
```

Pensez à nommer votre fichier styles.css ou à changer le nom dans le HTML
```css
/* Change les liens en gris */

a{color: darkgrey;}


/* Les liens passe en bleu au survolage de la souris */

a:hover{color: blue;}


/* met le titre en haut de page */

h1.top-element{
    position: absolute;
    top: auto;
}


/* centre le paragraphe */

p.middle-element{
    width: auto;
    margin: auto;
    text-align: center;
}


/* positionne les liens en bas de page */

li.bottom-element{
    position: absolute;
    bottom: auto;
}
```