This is an old revision of the document!

[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

L'objectif de cet exercice est de travailler le rendu d'un formulaire.

A Faire :

* Nous voulons créer un formulaire d'inscription, celui contiendra les informations suivantes :

* Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire. * Mettre en forme ce formulaire avec du CSS dans l'objectif :

* 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 :

Un peu d'aide ? * Pseudos-formats : :required, :invalid, :focus * 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)

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'identifiant choixCSS et possédant l'attribut : onchange=“changeCSS()”
Créez les différentes <option> du select en précisant comme value le chemin du fichier CSS

Si vous le souhaitez vous pouvez utiliser des liens au lieu d'un select, à vous de chercher comment !