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.
Mettez ici le code HTML qui correspond au tableau de droite.
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) :
Ecrivez le code HTML qui permet d'obtenir la mise en page suivante :
Ecrivez le code HTML qui permet d'obtenir la mise en page suivante :
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 :
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.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> :
<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">
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 : | ||
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.
