Dans cette séance de formation sur la création de sites web, nous allons aborder les pages de blog.

Tout d'abord, nous créons un conteneur pour notre page de blog en utilisant un div avec l'ID "blog-container". Nous lui appliquons également un style "display: grid" pour permettre un affichage en grille. La propriété "grid-template-columns: 1fr 1fr 1fr" indique que nous voulons 3 colonnes de largeur égale pour contenir nos articles.

<div id="blog-container">

</div>

Ensuite, nous ajoutons les articles à l'intérieur du div "blog-container". Pour chaque article, nous utilisons un div supplémentaire. Voici un exemple d'article :

<div>

    <img src="images/img.jpg">

    <span>2 Janvier 2023</span>

    <h2>Programmation informatique, Cours complet</h2>

    <p>Ce cours a pour but de vous initier à la programmation informatique. Le langage "support" que nous allons utiliser est Python.</p>

    <a href="blogitem.html">Voir plus</a>

</div>

Explication des balises utilisées :

- ```<img>``` : Cette balise est utilisée pour insérer une image dans l'article. Vous devez spécifier l'attribut "src" avec le chemin vers votre image, par exemple "images/img.jpg".

- ```<span>``` : Cette balise est utilisée pour afficher la date de l'article. Vous pouvez remplacer "2 Janvier 2023" par la date réelle de votre article.

- ```<h2>``` : Cette balise est utilisée pour le titre de l'article. Vous pouvez remplacer "Programmation informatique, Cours complet" par le titre réel de votre article.

- ```<p>``` : Cette balise est utilisée pour le contenu de l'article. Vous pouvez remplacer le texte entre les balises par le contenu réel de votre article.

- ```<a>``` : Cette balise est utilisée pour créer un lien vers une page de détails de l'article. Vous devez spécifier l'attribut "href" avec le lien vers votre page de détails, par exemple "blogitem.html". Vous pouvez également modifier le texte "Voir plus" pour afficher un autre texte si vous le souhaitez.

Vous pouvez répéter ce bloc de code pour chaque article que vous souhaitez afficher sur votre page blog statique en ajoutant un nouveau div avec les informations appropriées à l'intérieur du div "blog-container".