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 (vous devrez utiliser colspan).

Votre réponse n°1

Mettez ici le code HTML qui correspond au tableau de droite (vous devrez utiliser rowspan).

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 ci-dessous permet d'obtenir la disposition du tableau ci-contre :

<body>
 <table>
   <tr>
     <td colspan=2>LOGO
   <tr>
     <td>MENU
     <td>CONTENU
   <tr>
     <td colspan=2>Pied de page
 </table>
 </body>
		

Vous pourriez vouloir ajouter la feuille de style CSS suivante :
Et si vous souhaitez colorer vos cellules, appliquez-leur un style CSS dans les balises TD/TH grâce à l'attribut style :

À 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 htmlinstant avant de poster vos réponses) :

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, les contrôles de formulaire sont dans la colonne de droite. Voici un exemple :
Sans tableau Avec tableau
Nom :
Prénom :
Age :
Nom :
Prénom :
Age :

Vous pourriez vouloir ajouter la feuille de style CSS suivante :

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 HTML du W3C, puis cliquez sur le bouton Check. Vous obtiendrez alors :


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 l'utilisation de l'en-tête <!DOCTYPE html>, ainsi le validateur ve valider au standard HTML5. .

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