Differences

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

--- 2017_2018:s1:webdoc:td4 [2017/11/23 10:06]
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.
-Par ailleurs, vous aurez 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 TD, le 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 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 avec un plan sur papier de votre site, précisant les styles, mise en page et de contenu que vous souhaitez mettre en place afin que votre encadrant de TD puisse vous conseiller sur la difficulté relative de vos objectifs.
+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 =====
@@ Line 47: / Line 52: @@
 </code>
-Testez l'insertion d'une vidéo extérieure avec ce lien : http://www.i3s.unice.fr/~logre/docs/my_vid.mp4
+Testez l'insertion d'une vidéo extérieure avec ce lien : http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4
 ===== Tableaux =====
 La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''.
@@ Line 74: / Line 79: @@
 <box round rgb(185,211,238) 95%|**A Faire** :  >
-  * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web), et les cases contiennent le nombre d'heures de la journée consacrée au cours.
+  * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web, ...), et les cases contiennent le nombre d'heures de la journée consacrées à chaque cours.
-  * Attention, évidemment, les cellules correspondant à //algo// et //web// sont des cellules d'entête (Table Header)
+  * Attention, évidemment, les cellules correspondant à //algo//,  //web//... sont des cellules d'entête (Table Header)
   * Si vous n'avez pas cours, laissez la case libre en utilisant ''&nbsp;'' (//**n**on **b**reaking **sp**ace//)
 </box>
@@ Line 115: / Line 120: @@
        *  vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau.
+Plus d'informations [[https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child|ici]].
 ===== Les formulaires 2.0 =====
@@ Line 133: / Line 140: @@
 	* Bouton "Effacer"
 * Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire.
 * 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.
 	* Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.
@@ Line 146: / Line 157: @@
 <note tip>Un peu d'aide ?
     * 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)
 </note>

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools