ressources du cours Web B2 2026

Publié le par

Ce cours s’adresse aux étudiants des options peinture, dessin, céramique, sculpture, qui ont cours avec Serge.
Ceux ayant cours avec Nicolas, pourront trouver leurs références en suivant: https://webb2.netlify.app/
Pour ceux ayant cours avec Julie, l’adresse est la suivante: https://juliekerndonck.com/oldwideweb/
Les sites se complètent.Cette page a pour but de proposer un accès simple et facile aux références données durant le cours et à le compléter par d’autres liens. Elle liste également les exercices que vous devez réaliser ainsi que les dates de remise. Pour rappel: nous sommes en évaluation continue.

Les deux heures de cours se structurent généralement comme suit:

Réponses aux questions suite à l’exercice donné au cours précédent.
Apprentissage technique (HTML, CSS…).
Contexte culturel, historique, social des concepts, phénomènes abordés.
Artistes utilisant les concepts évoqués ou en rapport avec l’exercice à réaliser pour la semaine suivante.
Explication de l’exercice pour la semaine suivante.

Cours 1/12 du 5/6 février 2026

« Couverture » du cours:
Tattoo on sunset

Introduction:
Quelques questions posées en introduction pour commencer à baliser le cours:

Histoire d’Internet:

  • Différence entre le Web et Internet ?
  • Quand et où est né Internet ? Dans quels contextes ?
  • Quand et où est né le Web et par qui a t-il été inventé? Dans quels contextes ? Avec quel objectif ?
  • Les différents services d’Internet ?

Une Histoire d’Internet. Une histoire du Web.
Félix Tréguer – Une contre-histoire de l’internet du XVe siècle à nos jours. 01/2024.

Le web en 1996: A VHS Tape From 1996 Demonstrates What the Internet Looked Like in Its Early Days.

Expérimenter le web de 1990 dans un navigateur: https://worldwideweb.cern.ch/.

Qu’est-ce qu’un navigateur ? Les deux fonctions principales
Les différents navigateurs. Installer sur sa machine, Chrome, Firefox et Tor browser, en plus de Edge ou Safari.

Technique:
HTML: Les bases du HTML sur le site francophone openclassrooms.
Le traitement de texte spécialisé pour le HTML:
Atom.
 https://www.sublimetext.com/.
Visual studio code.

Passage à un éditeur spécialisé: Visual studio code.

Inscription et mise en ligne chez Netlify.

Les balises vues:

<html>
<head>
<title>Contenu de l'onglet</title>
</head>
<body>

un poème...

</body>
</html>

Travail 1 « le poème »:
Mettre en ligne sur Netlify la page réalisée dans le cadre du cours (un poème de plusieurs vers).
M’envoyer l’adresse par mail. Réalisé durant le cours. Vous avez un site et donc une URL chez Netlify.

Cours 2/12 du 12/13 février 2016

Art:
https://wwwwwwwww.jodi.org/
ASCII Art: wikipedia.
ASCII Art Archive.

Création de ses propres outils personnalisés grâce à l’IA. Exemple de Lionel Bayol-Thémines et son travail Beyond the code.. Démonstration de création d’une page web qui permet de créer du ascii art à partir d’une photo, avec Claude et/ou Chatgpt. Mise en ligne sur Netlify.

Prompt utilisé: Crée une page HTML, CSS et JavaScript fonctionnant en local qui transforme une image en ASCII art. Elle doit inclure plusieurs réglages, notamment la personnalisation des caractères pour le noir, le blanc et les niveaux de gris. Donne directement la page complète sans poser de questions.

Techno:
HTML:
– Le doctype,
– La langue,
– Le charset,
– Titres de niveau 1à 6,
– Paragraphe,
– Gras et italique,
– Retour à la ligne,
– Le principe de la page index.html
– La gestion des espaces surnuméraires et des retour à la ligne dans le code HTML (les navigateurs ne les interprètent pas). Exemple d’utilisation artistique avec: https://wwwwwwwww.jodi.org/
– Ligne de séparation, les attributs.

VOCABULAIRE:
– Balise,
– Attribut (exemple avec HR).

CONFIGURATION DE VISUAL CODE:
Toujours commencer par File/open folder (créer un nouveau dossier pour un nouveau projet ou ouvrir un le dossier d’un projet)
Réglage de l’explorateur de fichier:
Sélection du langage html.
Suggestion/autocomplétion html.
Suggestion Emmet (!): préférer Emmet plus efficace.
Le raccoursi ! pour écrire les balises de base.
Présentation du code avec indentation: View/palette de commande/Format document.
Retour à la ligne en fonction de l’ouverture de la fenêtre du navigateur: préférence text wrap, Préférence/settings/word wrap (on)

word wrap

NETLIFY
– Mise à jour d’un site (en gardant la même URL).
– code vu lors du cours:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>le contenu de l'onglet</title>
</head>
<body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <p>Le contenu du premier paragraphe</p>
    <p>Le contenu du <br>deuxième paragraphe<strong>gras</strong> <em> italique</em><em><strong>italique gras</strong></em> </p>
<hr width="50%">

</body>
</html>

Travail 2 « A la Jodi »:
Ecrire une page HTML en utilisant correctement les balises vues au cours: H1, H2, P, HR, BR, STRONG, EM. Site à la « Jodi » . Mettre en ligne sur Netlify.
Vous avez donc maintenant deux projets hébergés chez Netlify, deux URL différentes.

Cours 3 du 19/20 février 2025

Techno:
HTML:
Ligne de séparation HR, les attributs,
les listes ordonnées et non ordonnées.
Les images: lien absolu, lien relatif. Les attributs de la balise IMG.
Les formats d’image pour le Web: GIF, JPG, PNG.
Les nouveaux formats (AVIF, WEBP…), un article sur le sujet en anglais et un en français. L’app pour les conversion: SQUOOSH.
La balise PICTURE et la transaction de contenu. Pas vu cette année 2024.

les liens (relatifs et absolus), URL.

Autoformation en HTML sur Openclassrooms en français, anglais et espagnol.
Memento des balises HTML.
HTML5 cheat sheet. (aide mémoire HTML5)

NETLIFY
Mise à jour d’un site (en gardant la même URL).

VOCABULAIRE:
Attribut (exemple avec HR).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Le catalogue de Serge</title>
</head>
<body>
    <h1><IMG SRC="logo.gif" WIDTH=40 HEIGHT=30 ALT="Mon logo">Les sites de Serge</h1>
    <UL> 
      <LI><A HREF="https://stellar-cendol-689b03.netlify.app"> Site poème</a></LI>
      <LI><A HREF="https://singular-pudding-45b737.netlify.app/">Site à la Jodi</a></LI>
    </UL>
</body>
</html>

Travail:
Créer une page de menu qui mène vers vos 2 premiers sites (2 URL différentes). Utiliser évidemment des adresses absolues. La mettre en ligne sur Netlify. Il s’agit d’une nouvelle URL. M’envoyer par mail l’URL de cette nouvelle page en me signalant dans le mail qu’il s’agit de votre page catalogue. Vous l’actualiserez chaque fois que vous réaliserez une nouveau site (une nouvelle URL). Attention, ce sera cette page sur laquelle je me baserai pour trouver vos sites réalisés pour l’évaluation. Ce sera elle également que je mettrai sur la page rassemblant votre travail pour le cours.
Vous avez donc maintenant trois projets hébergés chez Netlify, trois URL différentes.

Cours 4 du 26/27 février 2026

Mais qui imagine le HTML, les css ? Le W3C le world wide web consortium

Qui gère les adresses IP et les noms de domaine: l’ICANN.

Nomination des fichiers

adresse 127.0.0.1

Technique HTML:

les liens (relatifs et absolus), URL.
Ligne de séparation HR, les attributs,
les listes ordonnées et non ordonnées.
Les images: lien absolu, lien relatif. Les attributs de la balise IMG.
Les formats d’image pour le Web: GIF, JPG, PNG.
Les nouveaux formats (AVIF, WEBP…), un article sur le sujet en anglais et un en français. L’app pour les conversion: SQUOOSH.
La balise PICTURE et la transaction de contenu. Pas vu cette année 2024.

Les 3 pages HTML (index.html, methode_de_travail.html, caractere.html):

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Monet: biographie</title>
</head>
<body>
    <ul>
        <li><a href="index.html"> Biographie</a></li>
        <li><a href="methode_de_travail.html"> Méthode de travail</a></li>
        <li><a href="caractere.html"> Caractère</a></li>
    </ul>
    <h1>Claude Monet</h1>
    <h2>Biographie</h2>
    <p>Texte.</p>
    
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Monet: caractère</title>
</head>
<body>
    <ul>
        <li><a href="index.html"> Biographie</a></li>
        <li><a href="methode_de_travail.html"> Méthode de travail</a></li>
        <li><a href="caractere.html"> Caractère</a></li>
    </ul>
    <h1>Claude Monet</h1>
    <h2>Caractère</h2>
    <p>Texte.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Monet: méthode de travail</title>
</head>
<body>
    <ul>
        <li><a href="index.html"> Biographie</a></li>
        <li><a href="methode_de_travail.html"> Méthode de travail</a></li>
        <li><a href="caractere.html"> Caractère</a></li>
    </ul>
    <h1>Claude Monet</h1>
    <h2>Méthode de travail</h2>
    <p>Texte.</p>
    
</body>
</html>

Travail 4 « le site d’artiste de trois pages »:
Réaliser un petit site Web de 3 pages consacré à un artiste.
N’utilisez pas d’IA pour réaliser le site, vous perdriez le sens de nos apprentissages. Nous travaillerons avec les IA dans qq semaines quand vous aurez aquis une meilleur compréhension du html/css.
Pour le contenu vous pouvez prendre la matière sur la page wikipedia d’un artiste, par exemple la partie consacrée à la biographie de Manet (ce sont des pages bien structurées avec titre, sous titre…).
Chacune des 3 pages contiendra:
– plusieurs niveaux de titre, une balise H1 (biographie) et une ou plusieurs balises H2 (enfance, apprentissage, début… en fonction de la page)
– Utilisez à bon escient au moins une balise STRONG et une balise EM.
– plusieurs paragraphes,
– une navigation identique sur chaque page. Navigation réalisée avec une liste.
– Au moins une image.
Mettre en ligne sur Netlify.
Vous avez donc maintenant quatre projets hébergés chez Netlify, quatre URL différentes.
N’oubliez pas de mettre à jour votre page catalogue avec cette nouvelle URL et de la remettre en ligne en gardant la même URL (on verra la semaine prochaine comment faire).

Cours 5 du 5/6 mars 2026

Css suite: Les possibilités infinies des css:
http://www.csszengarden.com/ (et sa mise en contexte sur wikipedia)
Un autre exemple célèbre: Francine:
http://diana-adrianne.com/purecss-francine/
https://github.com/cyanharlow/purecss-francine
Francine dans différents navigateurs…
http://designm.ag/graphic-design/50-css-only-icon-graphics/

Anatomie d’une règle CSS:

body {
    background-color: black;
    color: white;
    background-image: url(monet.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: center;
}

Typographie et mise en forme du texte:

  • tuto:
  • Taille de la police de caractères:
    • font-size: en rem. Valeur du m à la racine (html) Vaut l’équivalent de 16px par defaut.
    • unité relative (rem) versus absolue (px)
  • font-family:
  • Style de fonte, graisse, transformation et décoration de texte:
    • font-style: italic/normal/oblique
    • font-weight: bold/normal
    • text-transform: none/uppercase/lowercase/capitalize/
    • text-decoration: none/underline/line-through/overline
  • Alignement du texte:
    • text-align: justify/center/left/right (uniquement pour les balises block)
body { font-family:"times new roman", times, serif; }  
body { font-family:verdana, arial, sans-serif; } 
p { font-size: 0.8em; }
h1 { font-size: 1.3em; }
h2 { font-style: italic; }
h1 { font-weight: bold; }
h1 { text-decoration: line-through;}
p { text-align: justify; }

La feuille de style (style.css):

h1 {
    color: rgb(223, 135, 235);
}

h2 {
    color: rgb(255, 0, 0);
}
body {
    background-color: black;
}

Travail 4 suite:
Mettre à jour le site précédent avec ce qui a été vu au cours (CSS).
Mettre à jour sur Netlify, donc en gardant la même URL.
Vous avez donc toujours quatre projets hébergés chez Netlify, quatre URL différentes.
Pas besoin de mettre à jour votre page catalogue car l’URL n’a pas changé.

Cours 6 du 12/13 mars 2026

Greve le 12, pas d’étudiant. Le 13 on passe en revue l’état d’avancement des projets.

Cours 7 du 26/27 mars 2026

Visual Studio Code
Pour présenter hiérarchiquement son code il existe une fonction: Menu View/command Palette/format document.

Les balises sémantiques HTML 5 pour structurer le contenu:
une explication claire en français sur OpenClassRooms.

Balises <div> et <span>, les « balises universelles ».

<body> 
    <div class="container">
        <header>entete</header>
        <nav>navigation</nav>
        <article>contenu</article>
        <footer>pied de page</footer>
     </div>
 </body>

Lors du premier confinement j’ai enregistré cette vidéo à propos de la structuration: Vidéo structuration 18 minutes. Le code de cette vidéo:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <header>le logo de mon site</header>
        <nav>
            <ul>
                <li><a href="travaux.html">Travaux</a></li>
                <li><a href="expositions.html">Expositions</a></li>
                <li><a href="biographie.html">Biographie</a></li>
            </ul>
        </nav>
        <section>
            <article>
                <h1>le titre du premier article</h1>
                <h2>sous titre</h2>
                <p>Lorem ipsum dolor sit amet, <em> consectetur</em> adipiscing elit. <strong> Nullam</strong> rhoncus nisl lorem, at mollis enim condimentum et. Duis posuere id tortor in pellentesque. <em><strong>Vivamus</strong></em>  imperdiet, lorem porta dictum dignissim, eros lorem tempor eros, eu pulvinar odio leo id arcu. Suspendisse id varius nibh, eget cursus turpis.</p>
                <h2>sous titre</h2>
                <p class="para2"> Nunc lobortis consequat diam et molestie. Aenean tempor sagittis tortor ut luctus. Sed quis eleifend sem. Donec ultricies ullamcorper turpis ac hendrerit. Maecenas molestie quam at pharetra dictum.</p>
            </article>
        </section>
        <footer>
            <a href="mailto:web@monsite.be">le mail du webmaster</a>
        </footer>
    </div>
</body>
</html>

Le modèle des boites. Il y a deux ans, lors du premier confinement, j’ai enregistré cette vidéo pour le modèle de boîte. Elle peut vous être encore utile: Vidéo. 33:00

Les unités en css. Rem pour la typo, et VW pour les boites: une explication simple.

Cibler un élément
Introduction aux sélecteurs en CSS:
Sélecteurs de type (balises)

nav {
 background-color: rgb(0,180,180);
 }

Sélecteur de classe, l’attribut class

<p class="intro">
.intro {
      color: blue;
}

Sélecteur d’ID, l’attribut ID

<p id="intro">
#intro { color: blue; }

Il y a deux ans, lors du premier confinement, j’ai enregistré ces vidéos qui peuvent encore vous être utiles pour cette matière difficile. Les sélecteurs:

  • Vidéo préparation du fichier HTML de l’exercice. 14:06
  • Vidéo les sélecteurs. 17:11
  • Vidéo les pseudo-classes. 11:18

Astuce pour centrer toute une page dans la fenêtre du navigateur:

.container {  
background-color: rgb(180,180,180);  
width: 40em;  
margin-right: auto;  
margin-left: auto;  
}

Outils d’IA pour coder en HTML et CSS:

Travail 4 suite:
Mettre à jour le site précédent avec ce qui a été vu au cours (structuration). Vous avez donc toujours quatre projets hébergés chez Netlify, quatre URL différentes.

Cours 8 du 2/3 avril 2026

Le positionnement avec Flexbox. Cours « expérimental » construit par IA mais commenté par un humain. 🙂

courschatgptTélécharger

Pas de travail

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Cours 9 du 9/10 avril 2026

Positionnement avec Bootstrap :

  • Lors du premier confinement, en 2020, j’ai enregistré ces vidéos consacrées au positionnement avec Bootstrap. Elles peuvent toujours vous être utiles.
    Video 50:00 (ne regarder que les 15 premières minutes): Les bases de Bootstrap. Vidéo qui vous fera gagner des heures (des jours) pour le positionnement en CSS, solution simple, responsive et évolutive. Attention, on m’a signalé (merci) que cette vidéo avait un problème. Les 15 premières minutes sont bien mais à partir du moment où je commence à expliquer le téléchargement de Bootstrap l’image se bloque. J’ai donc recommencé cette partie. Voici donc la suite: vidéo 40:00.
    Cette année (2025), contrairement à la vidéo de 2020, je vais privilégier la méthode avec CDN, comme expliqué dans la documentation, getting started.
  • Grille de mise en page: principe et utilisation. La page a disparu donc lien sur archive.org.
  • Où le télécharger ? Getbootstrap.
  • Starter template.
  • Layout container.
  • Layout grid.
  • Pour aller plus loin avec bootstrap, responsive (container-fluid) et bar de menu. Vidéo 11:00.
  • Un outil en ligne pour en mode visuel, faire une mise en page avec Bootstrap: layoutit. Un belle découverte 2024.

Visual Studio Code
Pour présenter hiérarchiquement son code il existe une fonction: Menu View/command Palette/format document.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">
    <title>cours bootstrap</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <header class="col-12">logo</header>
        </div>
        <div class="row">
            <nav class="col-2">navigation</nav>
            <article class="col-10">contenu</article>
        </div>
        <div class="row">
            <footer class="col-12">copyright</footer>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>
header {
    background-color: aqua;
    border: 2px solid red;
}
nav {
    background-color: aqua;
    border: 2px solid red;
}
article {
    background-color: aqua;
    border: 2px solid red;
}
footer {
    background-color: aqua;
    border: 2px solid red;
}

Travail 5 le site bootstrap (site perso):
Réalisation de votre site d’artiste ou d’un artiste imaginaire, utilisant les techniques vues à ce cours, Bootstrap notamment.
Il doit contenir au moins 4 pages (index, travaux, bio…),
une navigation (on doit pouvoir rejoindre n’importe quelle page du site de n’importe quelle autre page du site),
des images,
du texte…
Mettre ce site en ligne sur Netlify. Vous avez donc un sixième projet hébergé chez Netlify, six URL différentes.
Ajouter le lien de ce nouveau site sur votre page catalogue (celle qui regroupe tous vos sites).

Travail préparatoire à un prochain travail
Pour la semaine prochaine: afin de préparer le travail sur votre site personnel, je voudrais que la semaine prochaine vous apportiez un dessin de la page d’accueil (et des autres pages) de votre site d’artiste, celui que vous devrez faire dans 2 semaines. Il faut l’imaginer graphiquement et au niveau des fonctionnalités, où sont les menus, que contiennent-ils, à quoi ressemble cette page, quelles fonctionnalités… Laissez vous la liberté de l’imagination, on verra ce qui est possible. Ca servira aussi pour un cours sur l’IA et comment collaborer avec elle pour réaliser un site.

Cours 10 du 16/17 avril 2026

body {
    background-color: black;
    color: white;
    background-image: url(monet.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: center;
}

Typographie et mise en forme du texte:

  • tuto:
  • Taille de la police de caractères:
    • font-size: en rem. Valeur du m à la racine (html) Vaut l’équivalent de 16px par defaut.
    • unité relative (rem) versus absolue (px)
  • font-family:
  • Style de fonte, graisse, transformation et décoration de texte:
    • font-style: italic/normal/oblique
    • font-weight: bold/normal
    • text-transform: none/uppercase/lowercase/capitalize/
    • text-decoration: none/underline/line-through/overline
  • Alignement du texte:
    • text-align: justify/center/left/right (uniquement pour les balises block)
body { font-family:"times new roman", times, serif; }  
body { font-family:verdana, arial, sans-serif; } 
p { font-size: 0.8em; }
h1 { font-size: 1.3em; }
h2 { font-style: italic; }
h1 { font-weight: bold; }
h1 { text-decoration: line-through;}
p { text-align: justify; }