Pages

Simulateur Maison !

🥷For free

https://dupontdenis.github.io/TestSelecteurDemo/

Cours 3 : CSS

 Avant de découvrir la technologie de placement GRID



https://microsoftedge.github.io/Demos/devtools-grid/


Nous devons apprendre les selecteurs ! 


CSS : les selecteurs

 

Cours


Questions



Liste des selecteurs

https://dupontcss.blogspot.com/p/selecteurs.html


Voici une sous liste de selecteurs à maîtriser.

SelectorExampleExample description

.class		.introSelects all elements with class="intro"
#id#firstnameSelects the element with id="firstname"
**Selects all elements
elementpSelects all <p> elements
element,elementdiv, pSelects all <div> elements and all <p> elements
element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element
element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements
element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element
:nth-child(n)                     p:nth-child(2)           Selects every <p> element that is the second child of its parent

TD 2 : Fil rouge !

 

Inspecter le code https://microsoftedge.github.io/DevToolsSamples/a11y-testing/page-with-errors.html


Cours 2 : HTML base

 Clonage de : https://github.com/dupontdenis/HTMLCode




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.




TD 1

 

TD 1

 


Cours un éditeur : 

"les éditeurs 👉(lien )"


 TD1 éditeur :



Test de niveau :

 

Cours 1 : sémantique



🆘 Sémantique

TD 1 : editeur


🆘 Vidéo


Association des étudiants en informatique

​​​​​asso@info-evry.fr

exemple copilot !


  1. HTML Structure:

    • HTML documents have a basic structure that includes <!DOCTYPE html>, <html>, <head>, and <body> tags.
    • Example:

  2. Elements and Tags:

    • HTML is made up of elements, which are defined by tags.
    • Tags usually come in pairs: an opening tag <tag> and a closing tag </tag>.
    • Example:

  3. Attributes:

    • Tags can have attributes that provide additional information about the element.
    • Attributes are placed within the opening tag and have a name and value.
    • Example:

  4. Common Tags:

    • Some common HTML tags include:
      • <h1> to <h6> for headings
      • <p> for paragraphs
      • <a> for hyperlinks
      • <img> for images
      • <div> and <span> for generic containers
    • Example:

  5. Semantic HTML:

    • Use semantic tags to improve the readability and accessibility of your HTML.
    • Semantic tags include <header>, <nav>, <section>, <article>, <footer>, etc.
    • Example:
Similar code found with 2 license types -
View matches
Inscription à : Articles (Atom)