Pages

QCM modification

test

Télé-travail

Nous allons mettre en place un télé-travail, le dom est representé

introduction au DOM

Completer un code JS sur un exemple

introduction au JS

Test : télé travail

Télé-travail : Découvrez node

Découvrir le DOM par vous même ( ici )

Télé-travail : F12 + console

Quizz Flex !

contrôle continu

Comment obtenir les figures suivantes ?

Pour chaque figure indiquer le code CSS à écrire !

Exemple :
code I
Solution I:
.flex-conteneur {
display : flex; flex-direction : row-reverse; }









code A
code B
code C

code D
code E




Utiliser le simulateur ! 




1
2

Travail maison

Bootstrap est en environnement de conception qui vous propose "en autre" de créer des grilles

Pour pouvoir utiliser cet environnement, il vous suffit d'ajouter dans le <head> la bibliothèque.


<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>



 Mais pourquoi ne pas créer sa propre grille ?


Création d'une grille en flex !

DM de we

Comment faire pour obtenir un texte centrer

Contrôle continue

nth-child and Co

Etude de cas

Création de notre propre code


Les cartes en flex !

front-end component library



Game : pour apprendre le flex

http://flexboxfroggy.com/#fr

Projet : chalenge

En utilisant le simulateur ( ici ) flex , trouvez les propriétés pour obtenir le résultat suivant :


Aide :

Plus d'infos »

Etude de position

Rechercher dans google
 vincennes1900 

Etudier le code de positionnement.


Etude de position

Modal : how to

quizz

balise area

https://vincennes1900.blogspot.fr/2017/12/les-sites-historiques-de-pathe.html

Quizz

quizz

Quizz

révision Sélecteurs




Niveau avancé :
position and Co

display

float

la notion de conteneur !
absolute

display : de base

en action !

CAS contrait d'utilisation des selecteurs

Code source

Étudions le fichier suivant Source ( voir détails )

Améliorations du code

Nous pouvons observer que nous avons factorisé les propriétés communes dans une même classe item et utilisé une classe spécifique "word" et "ppt" pour définir l'image de l'icône. 

 Cette conception facilite la maintenance du code.


Mais, comment modifier le css pour réduire le code HTML à 
<body>
 <div class="window">
<div class="titlebar">
...
</div>
<div class="contents">
<a href="pos/pos.doc"> posit</a> 
<a href="position.html"> bloc</a> 
<a href="bureau/bur.doc"> bureau</a> 
<a href="imprimer/index.html">Impression</a> 
<a href="menu/menu.ppt"> Menu </a> 
<a href="dir">Folder </a> 
<a href="page/page.doc"> page </a> 
<a href="newpage.html"> page tout en 1</a> 
<a href="lien/lien.html"> liens </a>
</div>
<a href="cour.ppt"> cour </a>
</div>
</body>

Les sélecteurs de base ! HOW TO

Nous allons revenir sur plusieurs sélecteurs.

First-child



Le comportement est celui attendu.



First-of-type




Pour comprendre la différence entre ces deux sélecteurs, il suffirait d'introduire une balise </br> pour modifier l’arborescence.




Attention au comportement de JSbin.


Il s’avère nécessaire de lancer  Run with JS  pour obtenir le résultat attendu.



Attention : 

écrire la règle
/*test 5*/

:not(:last-child){
  color : red;
}

le résultat n'est pas celui attendu : vérifier avec F12, le type du dernier enfant.

:first-child

Objectif

L'utilisation des speudo-classes first (lire le commentaire) est particulièrement efficace dans la construction de menu. Elle permet de distinguer le premier élément de la liste et de lui affecter un style particulier.

 La figure ci-dessus montre le résultat de l'application d'un bord arrondi au lien du premier élément de la liste du menu.
nav li:first-child a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
}

Fichier pour tester les selecteurs

Fichier Test


Entraînez vous ( ici )

Test : selector

Quizz !

A. La balise <img> est une balise

  1. block-img
  2. in-line
  3. show
  4. visible-block

B. Les balises <p> <h1> <a> sont

  1. des balises in-line
  2. des balises blocs
  3. une balise est de type iblocs
  4. deux balises sont de type blocs

C. Une balise p peut contenir une balise

  1.  des balises in-line
  2.  des balises bloc
  3.  la balise <p>
  4.  autre

D. une expression est elle invalide?

  1.  <div><ul><ul><li></li></ul></ul></div>
  2.  <ul><li><ul></ul></li></ul><div></div>
  3.  <div><ul><li><ul></ul></li></ul></div>

E. Quelle est la syntaxe correcte pour insérer un lien hypertexte ?

  1. <a name="http://www.w3schools.com">W3Schools.com</a>
  2. <a url="http://www.w3schools.com">W3Schools.com</a>
  3. <a href="http://www.w3schools.com">W3Schools</a>
  4. <a>http://www.w3schools.com</a>

F. Entre quelles autres balises les balises <link> se trouvent-elles ?

  1. <body> </body>
  2. <head> </head>
  3. <title> </title>
  4. <script> </script>

G. Quelle balise permet d’aller à la ligne ?

  1. <b>
  2. <b />
  3. <br>
  4. <br />

H. Comment insérer une image ?

  1. <img src = "image.png">
  2. <img href = "image.png">
  3. <a img = "image.png">
  4. <div img = "image.png">

Concerver votre travail

Créer un fichier HTML sur votre bureau et editer le avec Chrome !

Chrome

Top site

http://discover-devtools.codeschool.com/


On va hacker la page de Google !


http://filmetonjob.blogspot.fr/

FaceBook.
https://www.youtube.com/watch?v=ZJu4SeFEGGE

code

  1. var newLogo=document.createElement('img');
  2. var oldLogo = document.getElementById("hplogo");
  4. oldLogo.parentNode.replaceChild(newLogo,oldLogo);


Les attentes du prof !

Nous avons vu dans notre premier cours l'inspecteur. Le seul outil de développement que vous devez maîtriser. Mais quel outil !

Nous avons découvert une propriété intéressante "overflow". Elle est très utile dans bien des effets.

overflow en action

Mes attentes : 

Dans quelque temps, suite à ce genre de cours, vous devrez travailler par vous même.
C'est à dire rechercher des informations sur la propriété CSS overflow.

Mon rôle : 

Mon but est de vous permettre d'être autonome dans votre recherche.

Je ne peux pas travailler pour vous et faire la 1/2 heure de travail personnel quotidien.

En cours ou en TD, je vous montrerai que l'inspecteur permet de simuler la position de votre souris sur un élément. Cette information facilitera votre recherche.

Simuler la présence de la souris sur un élément




Plan TD : 2018

Inscription à : Articles (Atom)