Voir:  https://thoughtbot.com/blog/transitions-and-transforms

         https://thoughtbot.com/blog/css-animation-for-beginners

         https://caohuutitou-8939.trinket.io/sites/copy-of-q8-html

https://developer.mozilla.org/fr/docs/Web/CSS/align-content

Question 1:

(a) Créez votre URL: http://oldtown.glendon.yorku.ca/~yourlastname/2925/animation

Protégez-la avec 3 noms d'utilisateur  distinct et 3 mots de passe. Dites-moi ce que c'est pour que je puisse voir votre travail.

(b) Étant donné ce code de départ (starting code):  https://trinket.io/html/e61e324d33

Faire les changements que vous devez apporter au code  pour que votre résultat ressemble exactement à l' URL :

https://caohuutitou-8939.trinket.io/sites/tp_hover_span2-html  (Hover over rectangular text box.)

Affichez maintenant votre résultat comme une page Web à l'URL:

http://oldtown.glendon.yorku.ca/~lastname/2925/animation/q1.html

Question 2:

Question 3:

(a) Étant donné ce code de départ (starting code):  

https://trinket.io/html/f21f8a5603  

Faire les changements que vous devez apporter au code (de depart) pour que votre résultat ressemble exactement à ceci :

https://caohuutitou-8939.trinket.io/sites/hw2_001_end-html  (Réduisez la taille de votre fenêtre pour voir l'image s'adapter à la taille de l'écran.)

Donnez la modification que vous avez effectuée : ___________________________________________________________________________________

(b) Affichez maintenant votre résultat comme une page Web à l'URL:

http://oldtown.glendon.yorku.ca/~lastname/2925/animation/q3.html

Question 4:

(a) Étant donné ce code de départ (starting code):  

https://trinket.io/html/7e29faae15

Faire les changements que vous devez apporter au code (de départ) pour que votre résultat ressemble exactement à ceci :

https://caohuutitou-8939.trinket.io/sites/q3_b-html 

(Réduisez la taille de votre fenêtre pour voir l'image s'adapter à la taille de l'écran.)

Donnez la modification que vous avez effectuée :

 ___________________________________________________________________________________

(b) Affichez maintenant votre résultat comme une page Web à votre l'URL:

http://oldtown.glendon.yorku.ca/~lastname/2925/animation/q4.html


Question 5 :

(a) Examinez, puis intégrez (embed) cette URL  https://trinket.io/html/3c14e0a931  à votre page Web à  :

http://oldtown.glendon.yorku.ca/~yourlastname/2925/animation/q5-a.html

(b) Modifiez votre code dans (a) pour que votre résultat final qui doit ressembler à ceci :

https://caohuutitou-8939.trinket.io/sites/tran004-html

Affichez votre résultat  à : http://oldtown.glendon.yorku.ca/~yourlastname/2925/animation/q5-b.html

Voir aussi : https://www.w3schools.com/css/css3_transitions.asp


Questions 6 :

(a) Étant donné ce code de départ (starting code): 

https://trinket.io/html/b4f1cb03e2

Faire les changements que vous devez apporter au code  pour que votre résultat ressemble exactement à ceci : html  (Réduisez la taille de votre fenêtre pour voir l'image s'adapter à la taille de l'écran.)

Donnez la modification que vous avez effectuée : ___________________________________________________________________________________

(b) Affichez maintenant votre résultat comme une page Web à votre l'URL:

http://oldtown.glendon.yorku.ca/~lastname/2925/animation/q6.html


Questions 7 :

(a) Compte tenu de la page Web :

https://trinket.io/library/trinkets/171266a60a

Intégrez-la (embed) à votre URL :

http://oldtown.glendon.yorku.ca/~lastname/2635/march/midterm/page7.html

(b) Protégez VOTRE lien en (a) avec 3 noms d' utilisateur et mots de passe distincts.
    Votre fichier .htpasswd doit être conservé en dehors du répertoire WWW, pour plus de sécurité, et à :
    /home/yourlastname/2635/mars/

(c) En utilisant Avidemux et Audacity, faites  la nouvelle vidéo, hcthesun_slow.mp4, à un tempo de 92 %.

Affichez (embed) maintenant votre résultat  (la video lente)  a votre URL: http://oldtown.glendon.yorku.ca/~lastname/2635/march/midterm/hcthesun_slow.html

Question 8:

Étant donné l'URL : http://oldtown.glendon.yorku.ca/~titou/css/mdn/new1s/box-models.html

(i) Ajouter 2 autres boîtes de tailles différentes (utiliser "margin" ou "padding") ?

(ii) Comment faire les changements (dans les cases "interactives") en sorte que toutes les cases aient la MÊME taille tout en conservant la meme taille  des boites.

Donnez les changements que vous avez faits : ___________________________________________________________________

Question 9 :

Étant donné ce code de départ :  

https://trinket.io/html/6fc70faaa4

Étant donné le changement que vous devez apporter au code indiqué (dans les cases interactives) ci-dessus pour que votre résultat ressemble exactement à l' URL: :

Donnez la modification que vous avez effectué : ___________________________________________________________________________________

Affichez votre résultat sous forme de page Web sur :
http://oldtown.glendon.yorku.ca/~lastname/2925/animation/q9.html

Question 10 :

#### Fin des  questions possibles de test  mi-session.
#### Vous remettrez quelques   questions sélectionnées ( 3 ) parmi les questions ci-dessus.
#### Il y aura une date limite de 48 heures (date à préciser) car il s'agit d'un test.

Notes:

-- Video playback speed

-- Streaming audio and video

-- Manipulation of multimedia

Étant donné ce code de départ (starting code):  https://caohuutitou-8939.trinket.io/sites/tp1_start-html  .
Faire les changements (dans les cases "interactives") que vous devez apporter au code CSS  pour que votre résultat ressemble exactement à l' URL : (Réduisez la taille de votre fenêtre pour voir l'image s'adapter à la taille de l'écran.)

https://caohuutitou-8939.trinket.io/sites/copy-of-tp1_end-html  

Donnez la modification que vous avez effectuée : ___________________________________________________________________________________