- Les principales balises d'un document HTML
Voilà sans doute la leçon la plus utile depuis le début ou surtout la plus "amusante"
Nous allons voir, dans cette leçon, comment écrire de telle ou telle couleur, comment mettre le texte en gras ou faire un lien.
Même si je pense que la plupart d'entre vous sait faire tout cela, cette leçon reste importante.
Avant de commencer, un petit rappel de la leçon 3.
Un document HTML a toujours la même structure :
- un en-tête ou header qui se situe entre les balises <HEAD> et </HEAD>.
Cet en-tête reprend les informations sur le document HTML : titre, auteur, description, ...
- un corps qui se situe entre les balises <BODY> et </BODY>
Le corps du document HTML contient le texte de votre document, ce qui va s'afficher dans votre navigateur
Et aujourd'hui donc, on va apprendre les premières balises qui se mettent dans <BODY>.
Je mets tout de suite des liens qu'un fidèle lecteur
m'a fait parvenir et qui peuvent vous servir de guide en complément, enn aide-mémoire ou en approfondissement du cours.Tout d'abord : un nouveau guide Internet <a href='http://guide.ungi.net/manuel.htm' target='_blank'>http://guide.ungi.net/manuel.htm</a>
C'est un manuel que je consulte régulièrement car il est assez clair.
Et aussi pour cadrer avec la leçon d'aujourd'hui : le guide des balises HTML sur <a href='http://www.netweb.org/dico/divers/html.shtml' target='_blank'>http://www.netweb.org/dico/divers/html.shtml</a>
Vous trouverez la liste plus complète des balises HTML à l'adresse ci-dessus, je me propose ici de lister les plus courantes histoire de ne pas vous encombrer l'esprit avec des balises que concrètement on n'utilise une fois par an :
Un petit rappel parce que j'ai vu récemment du code produit par Front Page.
Les balises concernent les mots compris entre la "balise d'ouverture" <balise> et la "balise de fermeture" </balise>
S'il n'y a rien entre, ça ne sert à rien.
Exemple : <b></b>toto<b></b> est strictement équivalent à toto à l'affichage de la page.
Petite chose également. <b>Toto</b> est aussi strictement équivalent à <B>Toto</B> : les balises peuvent être écrites indifféremment en majuscule ou minuscule.
Voyons donc les principales balises :
Les balises de manipulation de texte :
- La balise <B> pour Bold
Cette balise permet d'afficher le texte en gras
<B>Texte</B> va afficher pour l'internaute Texte
- La balise <I> pour Italic
Cette balise permet d'afficher le texte en italique
<I>Texte</I> va afficher pour l'internaute Texte
- La balise <U> pour Underline
Cette balise permet d'afficher un texte souligné
<U>Texte</U> va afficher pour l'internaute Texte
- La balise <FONT>
Cette balise est un peu plus compliquée que les 3 précédentes car elle n'est pas utilisée seule mais avec des paramètres.
C'est à dire et tant pis pour le suspens : <FONT COLOR="#11FF11" FACE="Arial, Comic Sans MS, Impact" SIZE="3">
Ces paramètres peuvent être au nombre de 3 :
color qui, bien entendu, indique la couleur et s'écrit avec la convention déjà expliquée pour <a href='http://www.omforum.com/phpBB/viewtopic.php?t=2309' target='_blank'>la leçon 3</a>
A ce propos, je ne vous ai pas tout dit à propos des couleurs la dernière fois pour ne pas embrouiller le propos. Il faut savoir que certaines couleurs parmi les plus courantes sont repérées par leur nom anglais et peuvent être utilisées directement.
Vous trouverez la liste à cette adresse <a href='http://www.htmlgoodies.com/tutors/colors.html' target='_blank'>http://www.htmlgoodies.com/tutors/colors.html</a>
Exemple pllus parlant qu'un long discours. Au lieu d'écrire <font color="#FFFFFF"> vous pouvez écrire <FONT COLOR="white"> ce qui, il faut bien l'avouer, est beaucoup plus parlant
face face permet de dire quelle(s) police(s) doit utiliser Internet Explorer pour visualiser le texte. Dans mon exemple on voit une liste entre doubles crochets ("). Le navigateur va d'abord chercher à afficher avec du Arial et si la police n'est pas installée sur votre ordinateur va essayer avec du Comic Sans MS, ...
Si aucune police n'est trouvée, votre navigateur prendra une fonte par défaut.
size size=3 est la taille par défaut. Vous pouvez écrire plus petit (size=1 ou size=2) ou plus gros (jusqu'à size=7)
Les balises d'organisation du texte :
- la balise <BR> pour BReak
La balise <BR> est une des rares balises HTML à s'utiliser toute seule et non pas <BR> puis plus loin </BR>
C'est pour cette raison (mais je n'entre pas dans les détails) que vous trouverez des fois cette balise écrite sous la forme <BR />
La balise <BR> s'utilise pour aller à la ligne. Attention pas pour sauter une ligne, pour aller à la ligne. Utilisez donc <BR><BR> pour sauter une ligne
Dans certains cas (typiquement une image à gauche et du texte aligné à droite), il faut utiliser <BR CLEAR="all"> pour que le navigateur comprenne qu'il doit aller se positionner, pour la suite, sous l'image et non pas sous le texte.
Que ceux qui ont compris fassent une petite page avec un exemple des deux comportements expliqués ci-dessus (ça sera beaucoup plus parlant).
- la balise <HR> pour Horizontal Rule (enfin je crois)
Même remarque que <BR> : <HR> est utilisée sans balise de fin
Elle sert à insérer une ligne horizontale pour séparer 2 zones de texte.
Elle peut être complétée par certains paramètres :
Par exemple <HR align="center" size="3" width="80%"> créera une ligne centrée (les autres alignements sont align="left" et align="right") ayant une épaisseur de 3 et une largeur de 80% de la page.
-la balise <CENTER>
Elle est très utile (même si on verra qu'on peut s'en passer) pour centrer un texte.
Le texte centré sera le texte entre <CENTER> et </CENTER>
-les balises H1, H2, ... H6 pour Header
Ces balises sont aussi des balises de manipulation de texte mais je les mets ici car elles correspondent aux différents titres et sous-titres de votre texte.
Les balises H1, H2, H3, ... correspondent, pour donner un exemple concret, à Titre1, Titre2, ... sous Word.
-la balise <P> pour Paragraph
Le texte situé entre <P> et </P> correspond à la notion de paragraphe. Il sera automatiquement séparé du titre ou du paragraphe qui le précède.
Pour l'instant, le corps de vos documents HTML doit ressembler à ça :
Code : Tout sélectionner
<BODY>
<H1>Bienvenue</H1>
<H2>Introduction>/H2>
<P>blablabla...</P>
<H2>Développement
<P>blablabla...</P>
<P>blablabla...</P>
<P>blablabla...</P>
<H2>Conclusion</H2>
<P>blablabla...</P>
</BODY>
Voici sans doute une des balises les plus utiles : celle qui permet d'insérer des liens vers d'autres pages du site ou d'autres sites internet.
La balise <A> peut recevoir plusieurs paramètres.
Un usage classique est <A HREF="http://www.omforum.com" TARGET="omf">Vers OMForum</A>
Les plus utiles sont href et target
La valeur que prend href est soit un nom de fichier relatif (exemple page2.html) qui devra se trouver sur votre site ou une adresse internet (ex: <a href='http://www.omforum.com)' target='_blank'>http://www.omforum.com)</a>
Je rappelle (ou j'explique) une notion très très importante : la notion de chemin relatif et de chemin absolu.
Cette notion n'est pas très simple à expliquer, ni à comprendre mais elle est vraiment primordiale donc n'hésitez pas à me reprendre tant que vous ne l'avez pas compris (tant que je ne l'ai pas expliquée assez clairement).
Prenons l'exemple d'un fichier programme.exe sur votre ordinateur. Imaginons qu'il se trouve sur votre disque dur C dans le répertoire MP (Mon programme) lui même dans le répertoire PF (Program Files)
Son chemin absolu sera, pour Windows, C:/PF/MP/programme.exe
C:/ veut dire qu'on se trouve sur le disque dur C (imaginons qu'on ouvre l'explorateur de fichiers Windows et qu'on sélectionne C:) ensuite à chaque fois qu'on rajoute un nom de répertoire (par exemple PF), c'est comme si on double-cliquait dans l'explorateur de fichiers sur ce répertoire.
Enfin on ajoute le nom du programme.
Le chemin absolu est donc le chemin qu'il faut parcourir dans l'explorateur de fichiers Windows pour arriver au fichier en partant de "tout en haut"
Pour le chemin relatif, c'est les mêmes règles j'ajoute /répertoire quand je clique sur un répertoire mais en prenant un point de départ différent.
Un exemple : créez un répertoire images à la racine de votre compte Free. Placez-y une image image1.jpg
Vous ne connaissez pas son chemin absolu car vous ne savez à priori pas où se trouve votre répertoire images sur l'ordinateur de Free.
Par contre, vous savez que, par rapport au fichier index.html qui se trouve dans la racine de votre répertoire, l'image a un chemin relatif qui est images/image.gif
Comme on ignore tout de l'ordinateur de Free, on constate qu'on va devoir utiliser exclusivement des chemins relatifs.
En ce qui concerne le paramètre target, il sert si vous l'ajoutez target="_blank" à ouvrir la page que vous appelez dans une nouvelle fenêtre.
Bon ça a été plus long que prévu et comme je dois aller à Nice dans pas très longtemps je laisse la leçon en suspens. La suite et la fin (c'est pas long, ça ne concerne que les images) demain
Si quelqu'un peut expliquer ou trouver un site qui explique clairement les notions de liens relatifs et absolus, merci d'avance
pour tous ses conseils et... bonnes chansons à tous 
"Je suis le sergeant tirailleur Highway, j'ai descendu plus d'bières, ramassé plus d'pêche, baisé plus d'pouffiasses que vous tous ici bande de bleusaille". 
dis m'en plus en MP Merci
</span>
