User Tools

Site Tools


2017_2018:s1:webdoc:td4

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
2017_2018:s1:webdoc:td4 [2017/11/27 15:58]
pourcelot [[TD4] Multimédia et autres balises]
2017_2018:s1:webdoc:td4 [2017/11/28 17:50] (current)
pourcelot [Les formulaires 2.0]
Line 5: Line 5:
 Comme toujours, l'​objectif est de vous donner le temps d'​expérimenter ces différentes méthodes. Comme toujours, l'​objectif est de vous donner le temps d'​expérimenter ces différentes méthodes.
  
-Par ailleursvous aurez [[2017_2018:​s1:​webdoc:​projet|un projet]] à réaliser d'ici fin décembre, ​à savoir un site web démontrant toutes vos compétences en matière ​de web-développement.+<note important>​ 
 +À partir de ce TDle travail demandé n'est plus à rendre (il vous sert simplement ​de support pour que vous puissiez expérimenter).
  
-Vous devez donc commencer à réfléchir ​à votre [[2017_2018:​s1:​webdoc:​projet|projet]].+Ceci vous dégage du temps pour commencer à réfléchir ​en dehors des heures de TD sur votre [[2017_2018:​s1:​webdoc:​projet|un projet]], à savoir un site web démontrant toutes vos compétences en matière de web-développement.
  
-Ainsi, **vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier ​de votre site** à présenter à votre enseignant ​(contenus, styles et mise en page prévuspour qu'il puisse donner un premier avis.+Ce projet sera à rendre d'ici fin décembre (les modalités exactes ​de rendu seront fixées par votre enseignant ​de TD).
  
 +Les consignes, à respecter impérativement,​ sont listées sur [[2017_2018:​s1:​webdoc:​projet|la page du projet]].
 +
 +Ainsi, **vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier de votre site** à présenter à votre enseignant (contenus, styles et mise en page prévus) pour qu'il puisse donner un premier avis.
 +</​note>​
 ===== Insertion d'une vidéo / de son ===== ===== Insertion d'une vidéo / de son =====
  
Line 137: Line 142:
  
 * Mettre en forme ce formulaire avec du CSS dans l'​objectif : * Mettre en forme ce formulaire avec du CSS dans l'​objectif :
- * D'​obtenir quelque chose qui s'​approche de ça : http://​en.blog.files.wordpress.com/​2010/​11/​grunion-form-builder.png + * D'​obtenir quelque chose qui s'​approche de ça :  
- * D'​obtenir quelque chose qui ne ressemble surtout pas à ça : http://​wiki.lws-hosting.com/​lib/​exe/​fetch.php/​formail1.jpg +{{ :​2017_2018:​s1:​webdoc:​grunion-form-builder.png?300 |}} 
-* Et c'est pas fini, veiller à :+ 
 + * D'​obtenir quelque chose qui ne ressemble surtout pas à ça (pas de tableau pour la mise en page notamment !)  
 +{{ :​2017_2018:​s1:​webdoc:​formail1.jpg?300 |}} 
 +* Et c'est pas fini :
  * Lorsqu'​un champs est en train d'​être modifié, appliquer "une mise en surbrillance"​ de ce dernier.  * Lorsqu'​un champs est en train d'​être modifié, appliquer "une mise en surbrillance"​ de ce dernier.
  * Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.  * Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.
Line 149: Line 157:
 <note tip>Un peu d'aide ? <note tip>Un peu d'aide ?
     * Pseudos-formats :  :required, :invalid, :focus     * Pseudos-formats :  :required, :invalid, :focus
 +    * [[https://​developer.mozilla.org/​fr/​docs/​Web/​Guide/​HTML/​Formulaires/​Validation_donnees_formulaire|Validation d'un formulaire]] en HTML5.
     * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://​www.alsacreations.com/​tuto/​lire/​1372-formulaires-html5-nouveaux-types-champs-input.html)     * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://​www.alsacreations.com/​tuto/​lire/​1372-formulaires-html5-nouveaux-types-champs-input.html)
 </​note>​ </​note>​
2017_2018/s1/webdoc/td4.1511794706.txt.gz · Last modified: 2017/11/27 15:58 by pourcelot