HTML 5 terminale STG GSI TP avancé.
Réponse AJAX

Tableaux : le chevauchement de cellules (avec colspan et rowspan)

Initiation

On peut faire en sorte qu'une cellule d'un tableau chevauche deux cellules adjacentes, en largeur ou en hauteur. on utilise pour ça l'attribut colspan des balises <th> et <td> pour le chevauchement en largeur (c'est le cas du tableau de gauche dans le dessin ci-dessous), et l'attribut rowspan pour le chevauchement en hauteur (c'est le cas du tableau de droite dans le dessin ci-dessous).

Mettez ici le code HTML qui correspond au tableau de gauche.

Votre réponse n°1

Mettez ici le code HTML qui correspond au tableau de droite.

Votre réponse n°2

Mise en page d'un site Web grâce aux tableaux

Dans les sites Web, la mise en page globale est effectuée :

Par exemple, le code de gauche permet d'obtenir la mise en page de droite (pour simplifier, les attributs bgcolor pour spécifier la couleur de fond des cellules ont été supprimés. Beaucoup d'attributs obsolètes sont utilisés ici, on verra bientôt leur équivalent en CSS) :

<body leftmargin='0' rightmargin='0' topmargin='0'>
 <table width=100% cellspacing='0'>
   <tr>
     <td colspan='2' align=center>LOGO</td>
   </tr>
   <tr height=100>
     <td valign='top' width=20%>MENU</td>
     <td valign='top' width=80%>CONTENU</td>
   </tr>
   <tr>
     <td align='center' colspan='2'>Pied de page</td>
   </tr>
 </table>
 </body>
		

Explications sur l'utilité de chaque attribut :

A vous de jouer, écrivez le code HTML qui permet d'obtenir la mise en page suivante (n'oubliez pas de tester votre code dans un navigateur avant de poster votre réponse) :

Votre réponse n°3

Ecrivez le code HTML qui permet d'obtenir la mise en page suivante  :

Votre réponse n°4

Ecrivez le code HTML qui permet d'obtenir la mise en page suivante  :

Votre réponse n°5

Les formulaires

Les formulaires permettent à l'internaute de saisir des données (création d'un compte, petites annonces, message dans un forum, etc.) qui vont être traitées par le serveur.

Les différents traitements possibles sont :

Structure basique du formulaire, balise <form>

La structure basique d'un formulaire HTML, contenant un bouton de validation, est :
<form>
  ...
  <input type=submit value="Validez le formulaire">
</form>

La balise <form> se paramètre avec les attributs method et action :

Les différents champs dans un formulaire

La zone de texte, balise <input type="text"> :

Paramétrage possible :

La zone de texte pour mots de passe, balise <input type="password"> :
Mot de passe :

Les cases à cocher, balise <input type="checkbox"> :
Vous possédez une connexion Internet
Vous possédez un abonnement 3G
Paramétrage possible :

Les boutons radios, balise <input type="radio"> :
<input type="radio" name="gender" value="male">Mâle<br/>
<input type="radio" name="gender" value="female">Femelle

Mâle
Femelle
Paramétrage possible :

La zone de texte multilignes, balise <textarea>...</textarea> :

Paramétrage possible :

La zone de liste, balise <select>...</select> :
<select name="ville">
  <option value="1">Avignon</option>
  <option value="2">Cavaillon</option>
  <option value="3">Orange</option>
</select>

Remarquez que la valeur envoyée au script n'est pas la valeur affichée à l'internaute (lorsqu'on utilise l'attribut value). L'internaute voit "Avignon", mais s'il fait ce choix c'est la valeur 1 qui va être envoyée au script (car on a précisé : value="1").
Paramétrage possible pour la balise <select> :

Paramétrage possible pour la balise <option> :

Le champ invisible, balise <input type="hidden"> :
Pour envoyer au script une valeur sans que l'internaute ne la voie dans le navigateur. Plus utile qu'on peut le penser à priori. Par exemple dans ce TP dynamique, pour chaque question, des champs cachés informe le script du numéro de TP et du numéro de la question. Le numéro de l'élève est stocké dans un cookie. Seule vos réponses sont des champs visibles (de type <textarea>).
<input type="hidden" name="variable_cachée" value="sa valeur">

Alignement vertical du formulaire

Pour des raisons esthétiques, on insérera le formulaire dans un tableau pour gérer l'alignement vertical des champs. Le tableau peut être invisible. Les textes (nom, prénom, age) sont dans la colonne de gauche avec un alignement à droite (<td align="right">), les contrôles de formulaire sont dans la colonne de droite. On utilisera également les alignements haut et bas (<tr valign="top"> ou <tr valign="bottom">). Voici un exemple :
Sans tableauAvec tableau
Nom :
Prénom :
Age :
Nom :
Prénom :
Age :

Ecrivez le code HTML qui affiche le formulaire ci-dessous :

Votre réponse n°6

La validation

Explications sur... la validation

Les navigateurs sont très permissifs et afficheront une page Web même si celle-ci est bourrée de fautes (oublis de balises fermantes, attributs obligatoires manquants, etc.). Mais avec ce genre d'erreurs, on prend des risques. Par exemple, un code html erroné ne s'affichera pas de la même façon dans les différents navigateurs, ou il sera mal référencé dans les moteurs de recherche comme Google.

Pour éviter les erreurs dans le code HTML, il suffit d'utiliser un validateur du W3C.

Copiez votre code HTML et collez-le dans le validateur à cette adresse, puis cliquez sur le bouton Check :
http://validator.w3.org/#validate_by_input


Document valide.


Document non valide, à corriger.

L'idéal serai de valider chaque page que vous développez ou que vous achevez, pour prendre les meilleures habitudes possibles. Je recommande de valider en XHTML 1.0 transitional. Les plus audacieux d'entre vous valideront en XHTML 1.0 strict, qui demande une bonne séparation données/mise en forme, impliquant l'utilisation de CSS que nous verrons plus tard.

Collez ici le code HTML de la question précédente, une fois que vous avez réussi à le valider en HTML5 (sans erreur, mais warnings autorisés). Vous aurez besoin du DOCTYPE (question 18 du TP précédent), de la structure complète d'une page (question 1 du TP précédent).

Votre réponse n°7