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)