Pages

Cours 2 : inspecteur

Objectifs

Découvrir par vous même : https://tympanus.net/Tutorials/CaptionHoverEffects/index2.html


inspecteur


Help


Outils de développement

Tous les navigateurs possèdent aujourd’hui de formidables outils de développement.

Modification du DOM

A l’aide de code écrit en JavaScript on peut facilement modifier la structure d’une page WEB.

Nous allons nous amuser à remplacer le logo de google par notre photo !

Rendez-vous sur la page de google et tapez F12 ( ou rechercher les outils de développement ) Ctrl-Maj-I.

Dans la nouvelle fenêtre recherchez l’onglet console.

Dans la console tapez le code suivant  :

  1. const newLogo=document.createElement('img');
  2. //const oldLogo = document.getElementById("hplogo");
  3. const  oldLogo = document.querySelector(".lnXdpd ");
  4. newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg";
  5. oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Ce code est écrit en Javascript, sa fonctionnalité peut se résumer ainsi

  1. Création d’une image
  2. Recherche du logo
  3. Mise de la source dans l’image
  4. Remplacement du logo par l’image

Etude du réseau

Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/.

F12 et placez vous maintenant sur l’onglet NetWork, actualiser  la page et observer le temps de chargement des images.

Web SQL

On ne sera pas surpris d’apprendre que le navigateur disposent d’une base de données

Pour les anciennes versions :

Inspection des éléments

Par la suite nous allons utiliser le navigateur Mozilla.

La maîtrise du code HTML et CSS passe forcément par l'auto apprentissage. L’outil “inspecteur” facilite cette démarche. Cette partie est essentielle à la suite de votre formation.

Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/NEW/CSS/etudiant/page/flux1.html

Inspecter les codes pour

  • Connaître combien de balises <DIV> sont contenues dans le code.
  • Donner la taille du div id=”Gauche”
  • Changer sa couleur en rouge, mettre un taille de 70%, retirez la propriété float
  • Ajouter à div id=”droite” la propriété border: solid 5px;

Simuler la position hover

Aller dans la démo sur l’effet hover.

Inspectez la liste et à droite cliquez sur la partie jaune. 

Ensuite, cocher hover pour simuler le comportement de la souris sur l’objet.