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 :

soit par des cadres (frames en anglais) : méthode obsolète avec HTML 5..
soit par du CSS, méthode la plus répandue qui sera vue dans le cours et l'atelier CSS.
soit par des tableaux, méthode simple que je vais expliquer ici et que je recommande d'utiliser pour les projets cette anné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 :

Les attributs leftmargin='0' rightmargin='0' topmargin='0' de la balise <body> permettent de supprimer la mage blanche autour de la page.
L'attribut width=100% de la balise <table> fait que le tableau occupe toute la largeur de la fenêtre du navigateur.
L'attribut cellspacing='0' de la balise <table> supprime l'espace blanc entre chaque cellule.
L'attribut colspan='2' de la balise <table> fait que la cellule du logo (puis du pied de page) chevauche les cellules "menu" et "contenu".
L'attribut align=center de la balise <td> fait que le logo (puis le pied de page) sont centrés horizontalement dans leurs cellules.
L'attribut height=100 de la balise <tr> n'est pas indispensable. Lorsque vous aurez un contenu réel, la hauteur des cellules "menu" et "contenu" s'agrandira automatiquement.
Les attributs width=20% et width=80% des cellules "menu" et "contenu" font que le menu est beaucoup moins large que le contenu.

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 :

envoi du contenu du formulaire par courrier électronique,
traitement du contenu du formulaire par un script côté serveur (PHP ou ASP essentiellement), par exemple pour insérer les données dans une base de données.

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 :

method="get" : les données du formulaire sont transmises par l'URL, donc affichées en clair dans le navigateur (inadapté pour transmettre des mots de passe).
method="post" : les données du formulaires sont cachées dans la requête HTTP.
action="url" : adresse du script qui va recevoir et traiter les données du formulaire.
action="mailto:spastore2@free.fr" : adresse de courrier électronique qui va recevoir les données du formulaire.

Les différents champs dans un formulaire

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

Paramétrage possible :

name : nom tel qu'il sera récupéré par le script qui traite le formulaire (attribut obligatoire).
value : valeur par défaut contenue dans la zone de texte.
size : largeur de la zone de texte (en nombre de caractères)
maxlength : nombre maximal de caractères que l'internaute peut saisir.
disabled : le contrôle est grisé (= désactivé, on ne peut rien saisir dedans).

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 :

name, disabled.
value : valeur qui sera envoyé au script si la case est cochée (attribut obligatoire).
checked : la case est cochée par défaut.

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 :

name : pour que plusieurs boutons radios marchent ensemble, il faut qu'ils aient le même nom.
value : valeur qui sera envoyé au script si la case est cochée (attribut obligatoire).
disabled.

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

Paramétrage possible :

name, disabled.
cols, rows : nombre de colonnes et nombre de lignes de la zone de texte.
La valeur par défaut se place entre la balise ouvrante (<textarea>) et la balise fermante (</textarea>).

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

name, disabled.
size : taille en hauteur (nombre de lignes affichées à l'écran).
multiple : autorise les sélections multiples.
selected

Paramétrage possible pour la balise <option> :

selected : choix présélectionné par défaut lorsque la liste s'affiche.
disabled : choix désactivé.

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 tableau Avec tableau

Nom :
Prénom :
Age :
Nom :

Prénom :

Age :

Sans tableau	Avec 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