Interactions côté client

Nous allons quitter momentanément les réseaux et se limiter à travailler sur une machine seule.

L’objectif principal est d’introduire la gestion d’événements sur une interface graphique (ici une page Web) à l’aide de méthodes algorithmiques.

Ce sera l’occasion de (re)voir les élèments qui composent une page Web.

Ce qui suit ne se veut pas exhaustif. Si vous souhaitez approfondir sur ce thème, il existe une pleiade de sites de référence proposant des formations de tout niveau. Pour n’en citer que quelques uns, en voici trois:

Une page Web: trois fichiers !

Une page Web rassemble trois parties plus ou moins distinctes:

  • le fond: le texte, les images, … le tout structurés,

  • la forme/le style: la mise en page, les couleurs, le design,

  • et quelques éventuelles intéractions.

Chacune de ces parties ayant leurs propres langages qui n’ont de cesse d’évoluer tout en restant le plus intéropérable possible sur les divers naviguateurs du marché.

À faire:

Appuyer donc sur la touche \(\fbox{F12}\) sur ce présent site pour avoir un aperçu (assez fouilli) des fichiers qui le constituent.

Le contenu ? en HTML !

Le HTML (Hyper Text Markup Language) est un langage structuré par des balises dont certaines fonctionnent par paire (une balise ouvrante et une balise fermante), tandis que d’autres s’utilisent seules (balises orphelines).

On en est à la version 5 du langage: HTML5.

Les balises s’emboitent les unes dans les autres afin de former une structure semblable à un calcul avec parenthèses en mathématiques.

Tout comme écrire \(A=(1+[2-3)-(4] \times 5)\) n’a pas de sens, écrire <div><strong>Error !</div></strong> n’en a aucun.

À faire:

a) Proposer une correction du code précédent.
b) Créer un fichier index.html.
c) En vous inspirant de l’exemple précédent, complétez le afin d’avoir la structure suivante : doc1 d) Complétez le afin d’avoir la structure suivante : doc1

Il existe bien d’autres tags et balises en HTML. Admirez un peu en vous rendant ICI OU LÀ.

On en rencontrera certaines par la suite (<div></div> et <span></span> notamment).

Le style ? en CSS !

Le CSS (Cascading Style Sheets) est un langage qui permet de définir comment doivent apparaître à l’écran des élèments présents sur la page.

Cela demande une plus grosse charge de travail que le contenu du site le plus souvent tant les possibilités que permet le langage sont presque infinies.

Comme vous pouvez le voir, on peut préciser le style d’un élément:

  • en précisant sa balise (attention cela affectera tous les élèments avec la même balise),
  • en lui attribuant un identifiant unique (id=elt dans le fichier HTML et #elt dans le fichier CSS) ou non (class=elt dans le fichier HTML et .elt dans le fichier CSS).

À faire:

a) Mettre à jour votre fichier index.html avec le contenu ci-dessus.
b) Créer un fichier style.css et recopiez le contenu donné ci-dessus.
c) Ajouter un élèment 8 avec une balise <p> inclus dans l’élèment 3 de sorte que:

  • il soit centré (on fera appel à l’attribut text-align)
  • il ait une bordure de couleur bleue
  • il ait une marge extérieure inférieure de 25px.

À faire:

a) Mettre à jour votre fichier index.html avec le contenu ci-dessus.
b) Faites de même avec le fichier style.css.
c) Admirez !

Vous aurez noté l’utilisation de nouvelles balises qui sont classiques: <img>, <b>, <br />, <span>, <a>, <ul> accompagné de <li>.

Créer et gérer des évènements ? en Javascript !

On peut créer et gérer bien d’autres évènements. Voyez plutôt !

À faire:

a) Créer un fichier script.js et recopiez ce qui précède.
b) Mettre à jour les autres fichiers.
c) Quelles actions avec quels élèments présents sur cette page web trouve-t-on ?