Donner du style à une page html

Cet article fait partie d'une série de tutoriel sur comment faire son propre site web personnel le plus simplement possible et pour pas très cher, diffusés une fois par semaine sur mon stream twitch. Vous pouvez retrouver la vidéo sur ma chaine youtube

Jusqu'à présent on a réussi a mettre notre contenu sur le web mais c'était moche. En particulier :

  • les caractères accentués apparaissent bizarrement,
  • Internet nous dit que notre site est pas sécurisé et c'est dangereux,
  • Et globalement, c'est moche.

Pour résoudre les problèmes de caractères on a vu qu'on pouvait envoyer quelques instructions au navigateur en rajoutant des balises meta au début de notre page web. Pour l'encodage : 

<meta charset="UTF-8">
Ces balises peuvent aussi servir à délimiter notre texte, en l'encadrant avec par example <h1> et </h1> pour ensuite, dans un autre fichier appelé style.css décrire, avec un langage particulier appelé css, comment mettre en forme nos élèments. Par exemple 

h1 {
    font-size: 1.6em;
    font-family: 'Oxygen', Calibri, sans-serif;
    color: var(--accent);
    text-wrap: wrap;
}
fichier qu'on a chargé dans notre page web en rajoutant <link rel="stylesheet" href="/style.css"> au début de notre fichier html ( pour lui dire de charger notre fichier de style ). Au final notre page html ressemblait à ça : 

<!DOCTYPE html>
<meta charset="utf-8" />
<meta author="cepcam" />
<link href="styles/style.css" rel="stylesheet" />

<header>
    <h1>Pressf12.fr</h1>
    <h5>Le site des jolies captures d'écran !</h5>
</header>
<main>
    <article>
        <h2>Actualités</h2>
        <p>Retrouvez nos meilleurs captures d'écran.</p>
    </article>
    <aside>
        <h2>Mes dernieres photos</h2>
        <ol>
            <li>2025-08-27</li>
            <li>2025-08-14</li>
        </ol>
    </aside>
</main>

On a aussi essayé de résoudre le problème de sécurité en commandant un certificat gratuit ssl, fournit par let's encrypt, dans l'interface d'ovh mais ca n'a pas marché.

Dans la prochaine étape je sais pas ce qu'on va faire. sans doute bidouiller un peu avec les images.