Mini-projet : un site Web sur l’image

Le HTML

Le site web en local

étape 1 : Créer un répertoire /WWW et un sous-répertoire  /images afin de stocker les multiples fichiers du site web.

étape 2 : Ouvrir le logiciel Notepad++ (l’éditeur) et copier/coller le code HTML ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Titre de l'onglet</title>
    </head > <!-- fin de la 1ère partie : l'entête (les réglages) -->
 
    <body>
        <h1>Un titre sur la page</h1>
        <p>
            Puis écrire le contenu du paragraphe ici.
            Tout apparaît en bloc.
        </p>
    </body> <!-- fin de la 2e partie : le corps (la partie visible) -->
</html>

étape 3 : Enregistrer le fichier sous le nom lesFormatImages.html dans le dossier /WWW
Puis menu : Execution > Launch in Firefox pour visualiser la page web (puis fermer Firefox).

Éviter les caractères spéciaux dans les noms de fichiers : pas de lettre accentuée, pas d’espace !

Balises <p> <h1> <h2> <br>

Voici les 2 pages à reproduire : _image_1

étape 4 : Télécharger le Memento des balises HTML : 1-HTML memento

Lire les paragraphes sur les balises ouvrantes/fermantes ou auto-fermantes.

étape 5 : Modifier le code HTML de la page précédente avec les titres et paragraphes imposés. Il s’agit de bien comprendre les balises <p>(paragraphe), <h1> (titre de 1er niveau : heading), <h2>(titre de 2e niveau) et <br> (passage à la ligne : break).

NB :

  • Etre rigoureux sur l’indentation.
  • Tous les textes de la pages web sont placés à l’intérieur de balises block (<p>,<h1>,…). La balise <br> n’est pas une balise block mais une balise en ligne. Voir la liste des balises block et inline.
  • La mise en forme sera faite plus tard avec un fichier CSS (et il sera nécessaire de connaître les balises Block/Inline).

Listes <ul> et <ol>

Modifier les 2 pages pour reproduire : _image_2

étape 6 : Modifier le code HTML pour ajouter :

  • des listes à puces <ul> (unordered list)
  • des listes numérotées <ol> (ordered list)
  • et les items de ces listes <li> (list item)

Lire les exemples de la page 2 du Memento HTML.

Les entités &lt; et &nbsp;

Modifier les 2 pages pour reproduire : _image_3  (j’ai mis en rouge/jaune les entités à mettre).

Lire les entités de la page 1 du Memento HTML.

  •   &nbsp; (non-break space) : un espace « insécable » empêche un retour à la ligne à cet endroit. Par exemple : pour écrire 12 345,  on met un espace insécable entre 12 et 345, pour empêcher le navigateur de faire un passage à la ligne justement entre 12 et 345 !!
  • &lt; (less than) ou &gt; (greater than) : pour ne pas confondre les symboles inférieur/supérieur < > avec une balise HTML.
  • &laquo;  et  &raquo; remplacent les guillemets « ».

Hyperliens <a>, images <img>, tableau <table>

Modifier les 2 pages pour ajouter les images <img> , les URL des liens <a>  et les tableaux <table>_image_4

Les images

Vous récupérerez les images par copie d’écran et un logiciel d’édition d’image.

La balise img est auto-fermante : <img src="images/poisson.png" alt="un poisson pixélisé en quadrillage" />

Il faut toujours ajouter un attribut alt pour que les malvoyants obtiennent une description audio de l’image lors de leur lecture.

Les liens à insérer :

La balise du lien est <a> . NB : a=’anchor’ ou en français : ancre, lien.

Les tableaux

Il y a un exemple de tableau dans 1-HTML memento et pour bien comprendre :

  • <tr> démarre une nouvelle ligne et </tr> termine une ligne.
  • <td> démarre une nouvelle cellule et </td> termine la cellule.

Accessoirement :

  • <th> désigne une cellule titre de colonne (head). Donc <th> est similaire à <td>.
  • <td colspan="3"> fusionne 3 cellules.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1">
  <tr>
    <th>Titre col. 1</th>
    <th>Titre col. 2</th>
    <th>Titre col. 3</th>
  </tr>
  <tr>
    <td>Ligne 2 - Colonne 1</td>
    <td>Ligne 2 - Colonne 2</td>
    <td>Ligne 2 - Colonne 3</td>
  </tr>
  <tr>
    <td>Ligne 3 - Colonne 1</td>
    <td>Ligne 3 - Colonne 2</td>
    <td>Ligne 3 - Colonne 3</td>
  </tr>
</table>

Le CSS

lier un fichier CSS

La méthode recommandée est de créer un fichier extérieur (de type CSS) et lier ce fichier à la page web par une balise link.

Lire le paragraphe : En externe : fichier .css + un lien vers ce fichier CSS

texte en gras, souligné, italique

Reproduire les textes en gras, italique, souligné : _image_5

texte en gras

Comme la balise <b> est dépréciée, alors utilise une balise  <span> (de type « inline ») ou une balise déjà présente (ex : <p>), puis on crée et utilise une classe dans le CSS.

pageHTML.html
1
2
3
4
5
6
7
8
9
<body>
  <p>
    Texte normal puis <span class="en_gras">qq mots en
    gras avec span</span> puis normal pour finir.
  </p>
  <p class="en_gras">
    On peut aussi mettre la classe sur tout un paragraphe.
  </p>
</body>

Puis dans la feuille CSS : .en_gras { font-weight: bold; }

texte souligné, en italique

Idem, les balises <i> et <u> sont dépréciées, alors utilise  <span>  et des classes CSS.

  • text-decoration: underline;  : pour souligner.
  • font-style: italic; : pour mettre en italique.

couleur de texte et couleur de fond

Ajouter les couleurs d’écriture, couleur de background, changement de police de caractère, encadrement : _image_6

page d’accueil et menu

Ajouter une page d’accueil en HTML, qui présente votre site.

Puis un menu : voir Barre de navigation

poursuivre selon vos goûts

A un certain moment, pour mieux comprendre le CSS vous aurez besoin de distinguer les balises de type BLOCK ou INLINE, car certaines propriétés CSS ne fonctionnent que sur des balises BLOCK et d’autres que sur des balises INLINE.

Ne pas imaginer une mise en page ultra précise pour votre site car :

Une page web n’est pas un PDF !!! … Il est normal que la mise en page varie selon la taille de la fenêtre.

vérifier le code HTML avec W3C

Ouvrir le site du Consortium du World Wide Web https://validator.w3.org/#validate_by_input et copier/coller votre code HTML. C’est le W3C qui régit les règles du web.

  
Erreur courante si on a mis des listes <ul> <ol> à l’intérieur d’un paragraphe <p>. La solution est simple, il faut sortir la liste du paragraphe :

  1. fermer le paragraphe </p> avant de commencer la liste <ul>,
  2. fermer la liste </ul>,
  3. puis ouvrir un nouveau paragraphe <p>, qui se termine à fin </p>.

Formulaire Javascript

Vous trouverez le javascript soit au début de la page HTML, soit à la fin de la page HTML (ou soit dans un fichier séparé … surtout si le script est long).

La solution la plus facile et sûre est de le placer à la fin (juste avant </body>).

Cependant si vous voulez le placer en haut (à l’intérieur de <head> et </head>) alors il faut être conscient que le script est chargé avant les balises HTML de la page. Et si ce script lance des actions sur ces balises HTML, ça va bugger car elles n’existent pas encore dans la page !

proposer un rébus

Créer une nouvelle page web avec les images du rébus et un champ de texte pour la réponse du client.

Ensuite créer un script JavaScript qui récupère le mot tapé par le client et répond au client. Prendre modèle sur une des 2 versions : champ de texte .

remplir un tableau

Créer une nouvelle page web avec :

  • un tableau [7, 12, 47] portant l’identifiant « tableauID » : <table id="tableauID" border="1"><tr><td>7...... </table> (à vous de compléter les pointillés)

Ajouter une partie <script> en bas de page avec :

  • une variable texte :  var contenuDuTableau = "<tr><td>7......"; c’est l’innerHTML du tableau précédent.
  • puis on insère cette variable contenuDuTableau à l’intérieur du table.
    1
    2
    3
    4
    5
    6
    7
    <body>
      <table id="tableauID" border="1"></table>
      <script>
        var contenuDuTableau = "<tr><td>7......";
        document.getElementById('tableauID').innerHTML=contenuDuTableau;
      </script>
    </body>

Puis on va utiliser une variable tableau tab car on aura besoin de modifier ces valeurs du tableau plus tard. Donc, ajouter dans le script :

  • une déclaration de tableau : var tab = [7 , 12 , 47];
    il faut comprendre que le 1er élément sera noté tab[0] (ici c’est 7) ;
    puis le 2e élément est tab[1] (ici c’est 12) …
  • modifier contenuDuTableau en remplaçant les nombres 7, 12, 47 par les variables tab[0]tab[1]tab[2].
  • puis  remplacer les index 0,1,2 par une variable i (allant de 0 à 2) et écrire contenuDuTableau l’aide d’une boucle for (var i = 0; i < tab.length; i++) { ......... } dans laquelle on ajoute successivement "<td>"+tab[i]+"</td>" à la variable contenuDuTableau
  • Mettre tout ceci dans une fonction afficheTab() .. donc vous devriez avoir grosso-modo :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script> //modifier cette base
      function afficheTab() {
        var contenuDuTableau = "<tr>";
        for (var i = 0; i < tab.length; i++) {
          //................
        }
        document.getElementById('tableauID').innerHTML=contenuDuTableau;
      }
      
      var tab = [7,12,47];
      afficheTab();
    </script>

Ajouter :

  • un formulaire contenant un champ de texte.
  • lors de la validation, le nombre tapé champTexteest alors ajouté à la fin du tableau : tab.push(parseInt(champTexte));
  • puis on rafraîchit l’affichage du tableau en appelant la fonction afficheTab();

if (Number.isInteger(+(champTexte))) {..}  pour tester si champTexte est un entier, ou bien if (! champTexte%1) {..}

Pour trier le tableau d’entiers, … créer une fonction (qui contient une boucle).

animation Processing -OU- formulaire CSS

formulaire CSS

On ajoute une page web avec un formulaire <form> proposant 3 curseurs (Rouge, Vert, Bleu) permettant au client de changer la couleur du fond de la page web : voir le tutoriel du curseur rouge.

animation Processing.js

Choisir une animation, puis l’insérer dans la page web en utilisant une des la librairies : processing.js (plus simple que p5.js)

animation p5.js

idem avec la librairie p5.js (en faisant les modifications nécessaires).