This is an old revision of the document!
Table of Contents
[TD4] Multimédia et projet
Tableaux
La déclaration d'un tableau se fait avec la balise conteneur <table>.
Cette balise contient le tableau composé de lignes.
La balise du type conteneur <tr> permet de créer une ligne. Une ligne peut être composée de cellules.
Une cellule d'entête est créée par la balise conteneur <th>, elle permet d'indiquer le titre d'une colonne ou d'une ligne.
Une cellule de contenu est créée par la balise conteneur <td>.
Pour donner un titre à un tableau, il faut utiliser la balise caption.
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
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.
- Attention, évidemment, les cellules correspondant à algo et web sont des cellules d'entête (Table Header)
- Si vous n'avez pas cours, laissez la case libre en utilisant
Les formulaires 2.0
A Faire :
- Nom (obligatoire)
- Prénom (obligatoire)
- Adresse de messagerie (obligatoire)
- Téléphone
- Mot de passe (obligatoire)
- Confirmation du mot de passe (obligatoire)
- Offre d'inscription (liste déroulante : Free, Premium, Ultimate, Chuck Norris)
- Recevoir la newsletter (case à cocher)
- Bouton “Valider”
- 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 ne ressemble surtout pas à ça : http://wiki.lws-hosting.com/lib/exe/fetch.php/formail1.jpg
* Et c'est pas fini, veiller à :
- 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.
* Quiz final :
- Quelles limites sont atteintes avec le HTML5/CSS3 pour les formulaires ?
- Quelles solutions sont disponibles ?
Feuille de style dynamique
Vous pouvez récupérer ce code contenant un exemple de changement dynamique de feuille de style : code_projet.zip
Pour l'utiliser dans vos propres codes suivez les règles suivantes :
- copiez collez tout le code (balises incluses) de
<script type=“text/javascript”>jusqu'à</script>dans votre propre head - Créez une balise
<select>possédant l'identifiantchoixCSSet possédant l'attribut :onchange=“changeCSS()” - Créez les différentes
<option>du select en précisant commevaluele chemin du fichier CSS
Images réactives
Il est possible de créer des images réactive en HTML, c'est à dire ou certaines zones sont cliquables et déclenchent une action.
Par exemple
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
Pour créer des cartes avancées, il existe des outils qui vous permettent de les générer par exemple : http://www.maschek.hu/imagemap/ (Attention après chargement il faut accepter!!)
Attention c'est l'attribut “name” qui sert à faire la correspondance entre l'image et les zones (l'id généré par l'outil ne sert à rien).
A Faire :
- Intégrez cette image sur votre page
- Utilisez l'outil précédent pour créer une map dans cette image. lorsque l'on clique sur l'icone de Nice on est redirigé vers la page de présentation de l'iut Nice (http://www.iut.unice.fr/formations/site/id/4_site-de-nice) de même pour Sophia (http://www.iut.unice.fr/formations/site/id/5_sophia-antipolis).
- Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances).