|
(03) Un guide pour vos débuts... |
  copyleftSee You Why? |
Les "forms" (ou formulaires) sont des outils du Web, très souvent utilisés pour qu'un lecteur puisse vous donner certaines informations. Ainsi, c'est souvent par une "form" (un formulaire) que l'on vous demande vos noms, prénoms, adresse, adresse électronique (E-mail), etc.
Ces diverses informations, vous pouvez les conserver dans une base de données ; mieux, si vous êtes enseignant, c'est une manière d'organiser des tests sans que vos étudiants ne doivent quitter leur domicile...
Le traitement d'informations reçues par des "forms" est souvent attribué à de petites routines (programmes) écrites dans des langages comme Perl, Javascript, PHP ou tout autre logiciel capable de traiter des chaînes de carctères, des fichiers et autres informations.
Le HTML peut créer ces formulaires, mais malheuseusement, il n'est pas conçu pour traiter les informations recueillies.
Si vous ne pouvez pas écrire ce genre de routine, apprenez, faites appel à plus connaisseur que vous ou... apprenez le PHP ou le JavaScript... Cuy a conçu une formation en javascript et vous la propose ici.
Les "forms" sont très simples à encoder. Ils se construisent sur le même système de tags (entrant et fermant) que le langage HTML.
En voici un petit exemple, dont vous pourrez lire la source en cliquant sur le mot source :
Les balises <form> et </form> encadrent tous les éléments du formulaire.
<form method="post" action="URL d'expédition" enctype="text/plain">
... les formulaires proprement dit ...
</form>
N'oubliez surtout pas de refermer la balise de fin de formulaire... faute ridicule qui peut entraîner des heures de recherche...
La balise <form> ouvrante doit être accompagnée de paramètres dont voici en quelques mots l'utilité :
Entre les balises ouvrante et fermante <form>, on trouvera différents types de balises propres aux formulaires :
<p>Votre nom + prénom
<INPUT type="text" name="nom" size="30"></p>
|
va générer une ligne de saisie du type déjà rencontré dans l'exemple ci-dessus.
| Votre nom + prénom |
Attention !!! La balise <input> n'a pas de balise de fin (fermante).
Un exemple :
Exemple
|
La balise <script> n'est pas nécessaire ici, mais c'est entre ces balises que l'on pourrait placer une procédure qui traiterait les données introduites par le visiteur de vos pages. À condition, bien sûr, d'en connaitre un peu plus à propos du langage JavaScript.
La balise <textarea> et </textarea> suivie de divers paramètres, ouvre une zone (éventuellement de plusieurs lignes) qui pourra recevoir du texte
<p>
<TEXTAREA name="impressions" cols="30" rows="5"> texte par défaut</TEXTAREA></p>
|
va générer une zone de saisie de 5 lignes et 30 colonnes (donc 5 fois plus haute et de même largeur) que celle du type déjà rencontré dans l'exemple ci-dessus.
Attention !!! La balise <textarea> a une balise de fin, soit </textarea> .
Les balises <select> et </select> indiquent au browser l'ouverture d'une liste déroulante dont chaque élément est encadré par les balises <option> ... (</OPTION> facultatif en HTML4, conseillé en HTML5 et obligatoire en XHTML).
Une des options peut être présélectionnée par la paramètre "selected".
La hauteur de la liste déroulante est déterminée par le paramètre "... size".
La police de caractères utilisée peut être modiée par un paramètre tel que "... style="font-size: 11px; font-family:tahoma,sans-serif;" >
Un exemple :
<form>
<select name="secteur" size="2">
<option>primaire
<option>secondaire
<option selected>tertiaire
</select>
</form>
|
Exemple
|
La balise <input> suivie du paramètre type="radio" indique au browser l'ouverture d'un bouton-radio ou bouton d'option (arrondi, et dont seul un unique élément de la liste (de même nom [name="nom"] peut être choisi) ... (</INPUT> facultatif en HTML4, conseillé en HTML5 et obligatoire en XHTML).
C'est par des boutons d'option (radio) que vous pouviez indiquez votre âge dans l'exemple un peu plus haut.
Un des choix peut être présélectionné par la paramètre "checked".
Ici, le paramètre value est la valeur que prendre la variable "choix" (name="choix") si le lecteur coche cette option.
est généré par la source suivante :
<form>
<p>Secteur ?
<input type="radio" name="choix" value="1">
primaire
<input type="radio" name="choix" checked value="2">
secondaire
<input type="radio" name="choix" value="3">
tertiaire
</form>
|
Exemple
|
La balise <input> suivie du paramètre type="checkbox" indique au browser l'ouverture d'un bouton case à cocher (carrée, et dont plusieurs éléments de la liste (de même nom [name="nomnom"] peut être choisi) ... (</INPUT> facultatif).
Plusieurs choix peuvent être présélectionnés par la paramètre "checked".
est généré par la source suivante :
<form>
<input type= "checkbox" name="choixzz" value="pr">
primaire
<input type= "checkbox" name="choixzz" checked value="sec">
secondaire
<input type= "checkbox" name="choixzz" checked value="tert">
tertiaire
</form>
|
Ici aussi, comme pour les boutons d'option, le paramètre value est la valeur que prendra la variable "choixzz" (name="choixzz") si le lecteur coche cette option.
Exemple
|
Les entrées cachées permettent, lors de l'envoi, de joindre au formulaire une information non visible pour l'utilisateur. Lorsque la balise <INPUT> possède le type hidden, elle n'accepte plus que deux attributs, en l'occurrence NAME et VALUE.
La commande <INPUT TYPE="hidden"> spécifie la création d'une entrée cachée.
L'attribut NAME="Nom du champ" permet d'affecter un nom à l'entrée cachée.
L'attribut VALUE="Valeur de la variable" permet d'affecter une valeur à l'entrée cachée.
|
<HTML> |
Les images peuvent se substituer aux boutons de commandes standards à l'instar des hyperimages et partant d'accomplir des fonctions identiques aux boutons précités.
La commande <INPUT TYPE="image"> spécifie la création d'un bouton à base d'une image.
L'attribut SRC="Adresse de l'image" permet d'affecter une image à la commande.
L'attribut USEMAP="Adresse de l'image" permet d'affecter une image en coordonnées (image-map) à la commande.
L'attribut ALT="Texte" affiche une description de l'image.
|
<HTML> |
Le bouton de commande permet l'exécution d'instructions écrite dans des langages tels que le Javascript et le VBscript.
Le lecteur intéressé ne pourra qu'apprendre l'un de ces langages (une suggestion ici) :
Le bouton de commande peut cependant se trouver hors formulaire, c-à-d sans balises <form> et </form>.
Un bref exemple illustratif et nous n'irons pas plus loin...
dont la source est lisible ici :
<input type=button onClick="go('http://www.google.com');" value="Google"
name="button">
|
Ici, le paramètre value est la valeur qui sera notée sur le bouton.
En revoici un petit exemple :
Si l'action prévue dans le formulaire est d'envoyer un message e-mail, le bouton "Submit" exécute l'action, tandis que le bouton "Reset" annule tout ce qui a été répondu dans le formulaire.
Ici, le bouton "En cliquant ici, vous m'envoyez votre réponse" est un bouton "SUBMIT"
tandis que le bouton "En cliquant là, vous annulez tout" est un bouton "RESET",
dont vous pourrez lire la source en cliquant sur le mot source :
Ici aussi, le paramètre value est la valeur qui sera notée sur le bouton.
À moins de traiter les réponses à la main, ce qui est plus dur est le traitement des réponses reçues, via routines ou programmes adéquats. Quelques sites Web (avec des sripts particulièrement utiles) peuvent vous aider, nous songeons à :
forms.
L'essentiel de nos propos concernent la norme HTML 4.01 du langage HTML. Nous ne voulons pas ici entrer dans les nuances de chaque langage, mais nous pensons bien sûr au HTML, DHTML, XML, XHTML, les uns en doctype traditionnal, les autres en doctype Strict; les uns exigeant des fins de balises /> s'ils n'ont pas de balise fermante, les autres acceptant ou non des paramètres attribués avec ou sans guilles.
Notre but sera ici de vous faire découvrir les nouvelles balises propres aux formulaires
Un exemple de code répondant à ces nouvelles normes serait le bienvenu... il suffisait de demander...
C'est aussi l'occasion d'observé les caractères accentués qui n'ont pas été écrits selon la règle :
on n'écrit pas é, mais on écrit é, etc.
<form id="sondage" method="post" action="submit.php"> |
Ce qui donnera:
Dans le langage HTML qui permet de bâtir les pages Web, les balises <META> permettent d'indiquer aux moteurs de recherche un certain nombre d'informations sur le contenu d'une page. Le terme Meta signifie Metadata. Ces balises signalent donc de l'information sur l'information.
Imaginons que vous réalisiez un site parlant du Centre Universitaire de Yellowstone (=CUY), dans le code HTML de la page d'accueil, vous indiquerez, par exemple, les termes suivants :
<meta name="author" content="GVdK"> [si l'auteur s'appelle Gérard Van den Kruispunt]
<META NAME="description" CONTENT="Le site CUY, le plus grand du Hainaut, celui qui vous forme et qui vous donnera du travail. ">
<meta name="keywords" content="école normale, pédagogie, pédagogique, enseignement supérieur, professeur, enseignant, html, balise">
La balise <meta name="description" content="..."> permet d'indiquer au moteur de recherche une phrase résumant le contenu de la page. Cette description sera affichée par certains moteurs dans leur page de résultats, sous le titre décrivant la page trouvée ; inutile d'être trop long, plus de 150 à 200 caractères nous semble inutile. Si la page ne contient pas de balise, seront affichés en règle générale les premiers mots visibles sur la page. Cette balise permet donc également de mieux maîtriser la présentation de la page proposée à l'internaute par les moteurs. Ainsi, en l'absence de balise, un moteur pourra par exemple afficher les premiers mots du texte de la page.
La balise <meta name="keywords" content="..."> sert à indiquer des mots clés supplémentaires aux moteurs de recherche. Bien entendu, comme la phrase de description de la balise , ils ne sont pas affichés dans la page Web, mais sont "aspirés" par les spiders des moteurs qui choisissent ensuite d'en tenir compte ou non. Ces mots clés peuvent améliorer le classement de la page ou indiquer certains mots importants que ne contiendrait pas le document. Ils sont séparés, au choix, par une virgule, une espace ou une virgule suivie d'une espace.
La balise <meta name="author" content="..."> permet d'indiquer qui a créé le site Web et la page en question. Rien ne vous empêche d'indiquer ici le nom de votre société, vos initiales, votre nom en entier.
Permet de définir les droits d'auteur :
<META NAME="Copyright" CONTENT="Votre Nom, Année de création">
Permet de désigner les noms des programmes utilisés pour créer le document HTML.
<META NAME="Formatter" CONTENT="valeur">
<META NAME="Generator" CONTENT="valeur">
Permet de permettre ou interdire un comportement du robot indexeur du moteur de recherche :
<META NAME="Robot" CONTENT="NOINDEX,NOFOLLOW"> : pour interdire l'indexation, et interdire de suivre les liens de votre page web.
<META NAME="Robot" CONTENT="INDEX,FOLLOW"> : pour autoriser l'indexation et lui dire de suivre les liens de la page pour continuer l'indexation.
Permet de déclarer la langue utilisée pour l'indexation des robots :
<META HTTP-EQUIV="Content-Language" CONTENT="fr">
Permet de changer la localisation de vos pages :
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://cuy.be/pg/index2.html"> Après le chargement de cette page, le navigateur va automatiquement charger la page indiquée par URL. S'il n'y en a pas (CONTENT="10"), alors la page courante sera rechargée. La valeur est exprimée en secondes.
Permet de définir le type de document et la page de code (ou type d'alphabet, jeu de caractères) utilisée pour le texte :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
Permet de définir la date d'expiration du document :
<META HTTP-EQUIV="Expires" CONTENT="1 jun 2002 03:40:40 GMT">
<META HTTP-EQUIV="Expires" CONTENT="Mon Sep 2003 07:20:00 GMT">
Certaines pages font l'objet de mises à jour fréquentes. Il convient dès lors d'interdire aux navigateurs de "resservir" une version précédemment mise localement en cache. On donne à la page une date d'expiration - comme pour les yaourts - en heure GMT.
Avec la valeur 0, le navigateur comprend que la page expire immédiatement et doit être rechargée completement à chaque requête.
<META HTTP-EQUIV="Expires" CONTENT="0">
Produisant le même effet, les deux valeurs de l'attributs HTTP-EQUIV, "Cache-Control" et "Pragma" s'adressent aux différents navigateurs et interdisent absolument de placer la page dans le cache local. Afin de s'assurer d'une efficacité maximale sous tous les navigateurs, on n'hésitera pas à cumuler les trois balises :
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
En bref, les balises <META> ne changent en rien ce que voit le visiteur de votre site.
Il est possible de diviser l'écran en plusieurs cadres ou fenêtres ( appelés frames en anglais) de taille variable : soit un cadre supérieur, soit un cadre inférieur, soit un latéral gauche ou un latéral droit, soit les deux et d'autres combinaisons sont possibles.
Inconvénients :
- Tous les logiciels ne sont pas capables de lire des présentations FRAMESET.
- L'abus peut réduire appréciablement la taille de l'écran occupant l'espace de la page principale.
- Les moteurs de recherche n'aiment pas ce procédé (référencement multiple injustifié).
- Et last but not least, le HTML5 n'a pas retenu les balises <frameset>, <frames> et <noframes> dans son répertoire ;o)
Avantages :
- Permet de mettre sous les yeux, soit au haut (ou au bas) de la page, soit latéralement la liste des documents qui apparaîtront dans le grand cadre.
Une ou deux lignes en plus petit caractère, occupant 10 -15 % du haut (ou au bas) de l'écran par exemple, permet d'établir de 10 à 12 liens vers la page principale. Cette liste pourrait être plus longue en plaçant le cadre en colonne latérale gauche, mais la longueur des mots est un peu limitée et la largeur de l'écran est réduite.
Ceci ne convient pas pour la table des matières d'un livre entier , mais pour un chapitre ou un groupe plus limité de documents.
Cette balise se trouve à l'intérieur de <HTML>, il n'y a pas de <BODY> ni de </BODY>. Elle remplace et équivaut à BODY dans des documents sans cadres.
Elle contient les balises <FRAME>, qui se trouvent à l'intérieur de FRAMESET et qui correspondent à un (ou plusieurs) cadres. Elle doit contenir la balise <NOFRAMES> qui contient un document standard avec <BODY> pour être utilisé par un navigateur qui ne comprend pas FRAMESET... en existe-t-il encore ? Les navigateurs qui comprennent FRAMESET ignorent la balise NOFRAMES et les navigateurs qui ne comprennent pas FRAMESET affichent le contenu de NOFRAMES, ignorant FRAMESET.
Lorsque des balises ne sont pas reconnues par un navigateur, il les ignore purement et simplement. Notons pour être complet que un <FRAMESET> peut se trouver à l'intérieur d'un autre <FRAMESET>. La balise <FRAMESET> accepte deux attributs : ROWS (= lignes en français) et COLS (pour colonnes).
Un document FRAMESET doit comporter soit ROWS qui indique des séparations en cadres horizontaux, soit COLS qui indique une séparation verticale. Toutefois FRAMESET peut comporter les deux attributs: d'abord ROWS (avec son contenu, un cadre supérieur étroit et un cadre inférieur le plus haut), puis COLS avec son contenu en deux cadres verticaux qui divisent le grand cadre créé ci-dessus. . Il y aura alors 3 FRAMEs. Dans ROWS et COLS, on indique le nombre de colonnes, séparées par des virgules, soit en pixels, soit en % dont le total ne dépassera pas 100%! Nous retiendrons ici l'expression en %, la plus simple à "manipuler"
Exemple 1 : <frameset rows="20%, 70%,10%">
Ceci donnera trois cadres horizontaux répartissant l'écran en trois parties inégales.
Exemple 2 : <frameset cols="20%, 80%">
Ceci indique deux colonnes verticales.
Exemple 3 : <frameset cols="30,*, 80">
Ceci indique trois colonnes verticales, dont la première et la dernière auront respectivement des largeurs de 30 et 80 pixels, celle du milieu occupant le reste de la largeur de votre écran (variable de 640, 800 ou 1024 pixels... ou plus sur les ordis les plus récents).
Les concepteurs de sites utilisent de moins en moins les cadres, car les moteurs de recherche n'aiment pas et repèrent mal des pages conçues à l'aide de 'frames'.
Notons que, avec la souris, on pourra modifier la largeur des cadres, si on n'a pas introduit de balise qui l'interdit (NORESIZE)
Elles se trouvent à l'intérieur de <FRAMESET>.
Elles définissent les propriétés et le contenu de chacune des FRAMEs annoncées par FRAMESET. Elles comportent essentiellement deux attributs : SRC et SCROLLING.
SRC="URL" définit l'URL du document qui doit être inséré dans le FRAME.
exemple : <FRAME SRC="superieur.htm">
SCROLLING="yes" - optionnel - définit qu'on peut faire défiler le contenu du cadre, si le document dépasse le cadre
exemple :<FRAME SRC="superieur.htm" SCROLLING="NO"> .
Par défaut, il y aura moyen de rétrécir ou élargir les cadres avec la souris. Le document qui se place dans le cadre est un document HTML normal, comportant BODY avec ses attributs éventuels, tels que la couleur.
Notons que tant la balise FRAMESET que la balise FRAME acceptent l'attribut BORDERCOLOR , qui permet de définir la couleur du cadre. Si cet attribut se rapporte à FRAME, il se substitue à celui qui aurait été attribué à FRAMESET. La couleur s'exprime de la même manière que pour BGCOLOR (voir la balise BODY). Un autre attribut permet aux cadres de créer une bordure autour d'eux. D'autres caractérisent les marges par rapport à cette bordure ou en fixe la taille.
L'attribut FRAMEBORDER=Valeur* détermine selon le choix l'affichage d'une bordure en trois-dimensions ou standard.
*Choix
Netscape*Choix
MicrosoftDescription Yes 1 Le cadre a une bordure en 3D (valeur par défaut). No 0 Le cadre a une bordure standard. L'attribut BORDER=Valeur en pixel** définit la largeur de la bordure pour les cadres.
L'attribut BORDERCOLOR="couleur" définit une couleur de bordure.
L'attribut MARGINWIDTH=Valeur en pixel définit les marges de gauche et de droite des cadres.
L'attribut MARGINHEIGHT=Valeur en pixel définit les marges du haut et du bas des cadres.
L'attribut FRAMESPACING=Valeur en pixel définit un espace entre les cadres.
L'attribut ALIGN="Type d'alignement" spécifie un alignement du cadre dans le document.
L'attribut WIDTH=Valeur en pixel définit la largeur du cadre, en pixels.
L'attribut HEIGHT=Valeur en pixel définit la hauteur du cadre, en pixels.
L'attribut HSPACE=Valeur en pixel définit un espace horizontal.
L'attribut VSPACE=Valeur en pixel définit un espace vertical.
** La valeur par défaut de la bordure est de 5 pixels, 0 rend la bordure invisible.
|
<HTML> <NOFRAMES> <FRAME SRC="superieur.htm" SCROLLING="NO"> |
voici un autre exemple de l'usage de frames, repris du site : http://www.levif.be/ il y a plusieurs années, mais abandonné actuellement.
<frameset cols="160,*" frameborder="0" border="0">
<frame name="left" scrolling="no" noresize target="lobby" src="frame_left.htm">
<frameset rows="70,*,65"scrolling="no" noresize >
<frame name="frame_top" scrolling="no" src="frame_top.htm" target="lobby">
<frame name="lobby" src="lobby.htm">
<frame name="frame_bottom" scrolling="no" src="frame_bottom.htm">
</frameset>
<noframes>
<body>
<p> </p><p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
Le lecteur comprendra que la ligne "this page..." ne s'écrira que si l'ordinateur du lecteur de votre page n'accepte pas les cadres ou frames. La balise <noframes>...</NOFRAMES> est utilisée pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames
Pour ceux qui n'ont pas vu la page en question :
"Target" signifie "cible" en français... le but de cet argument "target" utilisé dans les deux pages où l'on trouve des hyperliens [à gauche, ou au dessus du cadre de droite], est d'ouvrir dans le cadre nommée "lobby" [c'est-à-dire le plus grand des quatre, où la page "lobby.htm" se trouvait], la page appelée par le lien du cadre "left" ou du cadre "frame_top". Que c'est compliqué... :-((
L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :
Souvent utilisé pour avoir un menu fixe à gauche, dans lequel on peut cliquer pour faire apparaître une info différente à droite... En résumé, je clique dans un cadre (frame), le page du cadre cible (target) est modifiée... Déjà plus facile ;-))
Considérez l'exemple suivant écrit en HTML :
<B>Ceci est un exemple d' <I>overlapping</B> .</I>
Le mot overlapping est contenu entre deux tags <B> et <I>. Les navigateurs (=browsers) peuvent se "mêler les pinceaux" s'ils rencontrent des tags ouvrants et fermants à différents endroits sans que soit respectée une certaine logique... si l'on a ouvert deux portes en suivant, on ne referme pas la première sans avoir fermé la seconde...
N'essayez pas de vérifier si votre browser accepte... essayez plutôt de respecter une logique d'écriture... travaillez par paires de tags, évitez les imbrications (simples, mais surtout multiples), rien de pire que l' "overlapping" ... tout cela vous fera gagner du temps à l'écriture, et évitera aux différents browsers de s'y perdre. Merci pour eux et pour vos futurs lecteurs.
Les protocoles HTML permettent le plus souvent d'imbriquer des tags (placer un couple de tags (entrant/fermant) à l'intérieur d'un autre couple de tags (entrant/fermant) : HTML protocol allows you to embed links within other HTML tags:
<H1><A HREF="Destination.html">Mon titre</A></H1>
Évitez d'employer des tags imbriqués à l'intérieur d'une ancre (évitez donc l'exemple ci-après) :
<A HREF="Destination.html">
<H1>Mon titre</H1>
</A>
Bien que la plupart des browsers acceptent cette (dernière) imbrication, les normes HTML demandent de ne placer aucun couple de tags à l'intérieur des ancres [entre le tag ouvrant <A HREF="Destination.html"> et le tag fermant </A>]
On parle même de rejet de ces formules dans les browsers futurs... ne tentez plus le diable, et songez qu'il faut pardonner aux navigateurs qui interprètent mal cette imbrication à l'intérieur des ancres (et aux navigateurs futurs qui refuseront de vous comprendre).
En cas de doute, consultez votre code HTML et vérifiez s'il est conforme aux normes spécifiées (voir Pour plus d' Information plus loin).
Certains tags de caractères modifient l'apparence du texte qui figure entre eux, ainsi :
<UL>
<LI><B>Un élément de liste en caractère gras</B>
<LI><I>Un élément de liste en caractère italique</I>
</UL>
Évitez cependant d'employer d'autres tags que les tags de caractères ; ainsi, évitez la temptation d'écrire le code suivant (faisant usage de tags de titre pour modifier la grandeur des caractères) :
<UL>
<LI><H1>Un titre en grands caractères</H1>
<LI><H2>Un autre en caractères un peu plus petits</H2>
</UL>
Bien que certains browsers gèrent ce genre d'écriture très correctement, le résultat est parfois surprenant sur d'autres navigateurs, parce que ce style d'écriture ne correspond à aucune norme. Évitez dès lors ce genre d'écriture et gardez un style compatible avec les normes.
Ainsi, les tags <FONT> , qui sont propres à Netscape (et donc, Communicator), sont souvent employés mais ignorés des autres navigateurs qui ne respectent que les spécifications HTML officielles.
Quelle différence existe-t-il entre l'imbrication d'un tag <B> à l'intérieur d'un tag <LI> et l'imbrication d'un tag <H1> à l'intérieur d'un tag <LI> ?
Aucune apparemment... sauf que sémantiquement le tag <H1> signifie qu'on devrait y trouver un titre principal (et pas du texte mis en évidence par ce format-là), et que devrait suivre un contenu. Il semble donc évident que l'usage du tag <H1> dans une liste est abhérent...
Les tags de formattage ne sont pas toujours cumulatifs. Ainsi, en écrivant ce qui suit :
<B><I>du texte</I></B>
vous pourriez vous attendre (logiquement) que cela produirait un texte écrit en gras et italique. Certains navigateurs le feront ; d'autres ne prendront en charge que le couple de tags le plus interne (italique, dans ce cas).
Avant de "déposer" une page Web sur votre serveur, assurez vous de l'exactitude de chacun de vos tags, de chacun de vos liens, en particulier des "ancres nommées".
Peut-être pouvez-vous demander à un "spécialiste" si votre code est correct.
Il existe des services de validation de codes qui vous diront si votre code HTML répond aux normes généralement acceptées.
Si vous n'êtes pas sûr de votre code, essayer ces vérifications peut être très utile pour améliorer votre style et votre connaissance du langage HTML.
Pour votre bonheur (espérons-le), ces services vous permettent de choisir le niveau de conformité exigé ou souhaité.
Ce choix vous laisse la lattitude d'écrire du code non conforme, mais qui peut produire des effets intéressants... mais dont le style est peu recommendable.
Lorsqu'un tag <IMG SRC> a pour lien une image non trouvée à l'adresse indiquée, votre browser l'ignore généralement, ou bien il affiche une "image bidon". Si cela vous arrivait, vérifiez votre code, vérifiez l'existence de l'image dans le répertoire, vérifiez l'exactitude de l'adresse mentionnée et vérifiez si votre fichier image peut être vue par le monde entier (propriétés de l'image). Si tout est correct, vérifiez si l'image peut être vue "online"... et bonne M... .
Si le contenu d'un fichier est destiné à ne pas être modifié (la vie de Jésus-Christ par exemple), peu de changements devront [probablement] être apportés à votre fichier. Certains documents sont cependant beaucoup plus sensibles au vieillissement (le nombre d'étudiants ayant réussi à la dernière session).
N'oubliez donc pas de remettre vos pages RÉGULIÈREMENT à jour !
Une mise à jour régulière est particulièrement importante s'il s'agit de calendrier hebdomadaire, convocations à des réunions, dernières mises-à-jour de statistiques, etc.
Retirez donc vos fichiers "dépassés" et, si vous en gardez une copie chez votre serveur, justifiez cette présence (p.ex.: le programme d'une formation qui a déjà eu lieu, mais qui sera probablement reprise lors du prochain programme de formation).
Tous les browsers ne réagissent pas de la même façon au langage HTML (et donc aux fichiers HTM). Retenez que certaines différences apparaissent d'après le browser (=navigateur) utilisé ; tantôt les tags (=balises) sont ignorés, tantôt ils sont interprétés différemment.
Vous pourriez passer (et même perdre) beaucoup de temps pour que vos fichiers paraissent quasi parfaits sur votre navigateur actuel. Si vous employez un autre ordinateur (avec des préférences différentes) ou, encore plus, si vous changez de navigateur (ex: IE4 à Communicator 5.00), vos fichiers pourraient avoir une tout autre allure.
D'où ce petit conseil :
Comme dans tout programme, il peut être plus que souhaitable de commenter ses fichiers. Les commentaires sont du texte qui n'apparaîtra pas à l'écran de celui qui vous lit, mais qui pourrait vous aider lorsque vous reprendrez votre fichier "en mains". ... à moins que quelqu'un d'autre ne le fasse (merci pour l'aide des commentaires). La mémoire est la faculté qui oublie...
Un usage classique des commentaires est :
Pour insérer un commentaire, il faut écrire :
<!-- vos commentaires utiles, par exemple : paragraphe suivant à modifier selon nouvelles données -->
Remarquez que plusieurs lignes peuvent séparer le début des commentaires
<!--
de
la fin
des mêmes
commentaires...
-->
N'oubliez pas le point d'exclamation, ni les traits d'union, comme indiqués ci-dessus.
Généralement, ce qui est entre les balises de commentaires n'est pas lu par votre navigateur (ou browser), sauf exceptions dont anciennement le langage javascript, routines VBscript et autres....