Interaction Homme Machine sur le Web

HTML

HTML pour HyperText MarkUp Language est un langage à balises qui structure les pages Web

CSS pour Cascading Style Sheet est un langage qui sert à mettre en forme les pages Web

Copier sur votre ordinateur les fichiers .html et .css suivants

Les ouvrir avec un éditeur de texte (Notepad++ ou Visual Code ou ...) et répondre aux questions suivantes

exemple.html

feuilleSty.css

Questions

  1. Remplir les espaces entre les balises par le texte comme sur l'image ci-dessous et visualiser avec le navigateur le rendu de la page au fur et à mesure du remplissage (pensez à enregistrer et rafraîchir la page)

  2. Créer un répertoire images dans lequel vous allez mettre l'image suivante html.png
  3. Rafraîchir la page et vous devez voir ceci

  4. Enlever les commentaires autour de la balise link pour rendre ainsi le fichier .css actif

    Enregistrer et rafraîchir la page vous devez observer alors ceci

  5. Allez lire un peu le code du CSS et comprendre le sens du code en commentant et décommentant

HTML (suite)

Nous allons travailler à partir du site de la fondation Mozilla

Dans l'ordre lire les documents suivants et faire le TP associé

  1. Commencer avec le HTML (surtout la partie Anatomie d'un document HTML)
  2. Fondamentaux du texte HTML
  3. Création d' hyperliens
  4. Faire le TP "Structurer une page de contenu"

CSS

Nous allons travailler à partir du site de la fondation Mozilla

Dans l'ordre lire les documents suivants et faire le TP associé

  1. Getting started with CSS
  2. How CSS is structured
  3. Using our new knowledge
  4. Cascade and inheritance
  5. The box model

Javascript

Avant de revenir sur les bases de Javascript nous allons voir en premier la notion d'évènement

Allez faire le TP sur le site de la fondation Mozilla ici

Formulaire méthode GET

Questions

  1. Remplir le formulaire suivant et cliquez sur OK

    Qu'observez vous au niveau de l'U.R.L ?

    Quels inconvénients voyez vous à la méthode GET ?

  2. Que s'est il passé quand vous avez cliqué sur OK ?

    Quel est le nom et le type du fichier visible dans la barre U.R.L ?

    Où est exécuté ce fichier chez le client ou le serveur ?

  3. Chaque entrée du formulaire a un nom significatif pour faciliter le traitement des données entrées
  4. En observant le code source de la page quelle balise html a été utilisée pour afficher les éléments du formulaire en colonne ?
  5. Quel code css utiliser pour décaler OK vers le centre de la page ?
Cliquez ici pour voir le formulaire

Formulaire méthode POST

Questions

  1. Remplir le formulaire suivant et cliquez sur OK

    Observe-t-on le même phénomène que le précédent formulaire ?

  2. Que s'est il passé quand vous avez cliqué sur OK ?

    Quel est le nom et le type du fichier visible dans la barre U.R.L ?

    Où est exécuté ce fichier chez le client ou le serveur ?

  3. Chaque entrée du formulaire a un nom significatif pour faciliter le traitement des données entrées
  4. En observant le code source de la page quelle balise html a été utilisée pour afficher les éléments du formulaire en colonne ?
  5. Quel code css utiliser pour décaler OK vers le centre de la page ?
Cliquez ici pour voir le formulaire