• Accueil
• Informations
• "Tutoriel"
• Formulaire
• Liens
• Retour CTM

• Multi-fonds/Cadre
• Menus 2 colonnes
• Menus 3 colonnes
• Entrées
• Mnimalistes

Quelques balises (X)HTML et leur explication

• Les titres // Résumé
• Les paragraphes // Résumé
• Mettre du texte en valeur // Résumé
• Les liens // Résumé
• Les images // Résumé

En couple ou célibataire ?

La toute première chose que je vais vous expliquer, c'est que certaines balises fonctionnent "en couple", tandis que d'autres sont "célibataires". Il ne faut pas oublier de fermer toutes les balises lorsque l'on code en XHTML. Les balises "en couple" ont la forme suivante: <balise>Intérieur de la balise </balise>.
Le "/" sert donc à indiquer la fermeture de la balise. C'est le même principe pour les balises "célibataires", qui ont cette forme-ci: <balise />.

Ces balises prennent ce qu'on appelle des attributs. Je ne vous détaillerai pas ces attributs, ni même toutes les balises, je vais juste vous donner le minimum du minimum pour remplir votre page. Si vous voulez en apprendre plus, il existe quantité de tutoriels sur le Web, et je peux vous recommander Open Classrooms.

Les titres

Il existe plusieurs importance de titre, qui vont du plus important, h1, au moins important h6. Ce sont des balises de type "couple", donc on les utilisera de la manière suivante: <hx>Titre</hx>, en mettant bien sur les chiffres 1,2,3,4,5 ou 6 à la place du "x". J'utilise le plus souvent les h1, h2 et h3. Voici ci-dessous un aperçu des titres

Dans les kits offerts dans cette section, vous pouvez, pour centrer un titre (ou d'autres éléments) mettre un attribut class="center". Ce qui donne la balise suivante: <h3 class="center">Titre centré</h3>

Résumé sur les titres

<h1>Titre</h1>, h1 peut être remplacé par h2, h3, h4, h5, ou h6, classé par ordre d'importance

Pour les kits de CTM, possibilité de centré les titres avec l'attribut class="center": <h1 class="center"> Titre</h1>

Retour haut de la page

Les paragraphes

Pour structurer le texte dans la page web, on utilise les balises de paragraphe <p>Un beau paragraphe ...</p> Tout le texte que vous mettrez dans un paragraphe sera "à la suite", sans retour à la ligne, sauf une fois atteint les limites du paragraphe. Pour aérer un peu votre texte, utiliser plusieurs paragraphes. Pour forcer un retour à la ligne à un endroit précis du paragraphe, il existe la balise "retour à la ligne" <br />.
Mais ... mais ... elle est pas comme la balise de paragraphe ?
Eh non, il s'agit d'une balise "célibataire" ! Alors n'oubliez pas de la fermer avec le "/" juste avant le >.

Et pareil que pour les titres, il est posible de centrer le paragraphe et son texte avec l'attribut class="center" (pour les kits de CTM).

Résumé pour les paragraphes

<p>Bonjour !
< br /> Je suis un paragraphe normal</p>

Balise <p> ... </p> pour faire un paragraphe, balise < br /> pour un retour à la ligne

<p class="center" >Bonjour !
< br /> Je suis un paragraphe centré</p>

Retour haut de la page

Mettre du texte en valeur

Je vais ici vous donner que deux balises, <em>Texte en italique</em> et <strong> Texte en gras</strong>.

Pour mettre de la couleur, sans toucher aux feuilles CSS si vous n'êtes pas à l'aise avec, utiliser l'attribut style="color:code_couleur".
Pour un fond de couleur, utiliser style="background:code_couleur;"
Et pour donner un fond et une couleur de texte, utiliser style="background:code_couleur;color:code_couleur;"

Vous pouvez appliquer cet attribut à une balise de paragraphe (<p style="">) ou a un mot spécifique en utilisant la balise-qui-sert-à-rien
<span style="color:red;">le mot</span>

Le code couleur peut être le nom en anglais (red, white, black, blue, yellow, green, purple, etc), un code hexadecimal ou RGB.
Je ne m'étendrais pas plus là-dessus ici, je vous donne juste un tableau récapitulatif des 16 couleurs de base, les noms en angalis seulement.

Nom	Aperçu	Nom	Aperçu
black		white
grey		silver
maroon		red
blue		navy
green		lime
olive		yellow
purple		fuchsia
teal		aqua

Résumé de la mise en valeur de texte

<p style="color:green;" >Paragraphe écrit en vert</p>

Mot écrit en <span style="color:red;" >rouge</span> dans un paragraphe en vert

<p style="background:green;" >Paragraphe au fond vert</p>

Mot au fond <span style="background:red;" >rouge</span>

<p style="background:navy;color:white;">Paragraphe écrit en blanc sur fond bleu foncé </p>

Retour haut de la page

Les liens

Les liens ont la forme suivante: <a href="page.html">Lien</a>, il vous suffit de mettre l'adresse de votre page à la place de "page.html" et le nom que vous voulez à la place de "Lien".

Il n'est pas conseillé de forcer l'ouverture des pages dans une autre fenêtre (ou onglet), c'est pourquoi le "target=""" n'est pas valide en (X)HTML strict. Si vous souhaitez vraiment l'ouverture dans une autre fenêtre (ou onglet), il vous faut mettre le lien sous cette forme: <a onkeypress="if (!this.isContentEditable) return !window.open(this.href,'blank');" onclick="if (!this.isContentEditable) return !window.open(this.href,'blank');" href="adresse.html">Lien</a>

Notez qu'il s'agit de Javascript, donc pour les personnes ayant le Javascript desactivé, le lien de s'ouvrira pas dans une nouvelle fenêtre, mais dans la même

Résumé pour les liens

<a href="adresse_de_votre_page.html"> Nom de votre lien</a>

Forcer l'ouverture dans une autre fenêtre (onglet):
<a onkeypress="if (!this.isContentEditable) return !window.open(this.href,'blank');" onclick="if (!this.isContentEditable) return !window.open(this.href,'blank');" href="adresse_de_votre_page.html">Nom de votre lien</a>

Retour haut de la page

Les images

Une page web faite uniquement de texte n'est pas forcément très agréable à lire, alors mettons-y des images pour illustrer et égayer le tout. Pour insérer une image, c'est une balise "célibataire" qu'il vous faut, soit <img />.
Vous devez indiquer également le lien vers l'image ainsi qu'un texte de remplacement, si l'image ne peut pas s'afficher. Ce qui vous donne: <img src="adresse_image.jpg/gif/png" alt="Texte de remplacement ..." />

C'est quoi .jpg/gif/png ? Ce sont tout simplement les différents formats d'images existants (les plus courants).
Pour les bases, le jpg est utilisé pour presque toutes les images immobiles, il permet de compresser les images sans trop perdre de résolution. Le gif est surtout à retenir pour les images animées et les images à fond transparent, il est souvent assez lourd. Le png est très très bien au niveau de la compression sans perte de résolution, il permet la transparence, mais IE à quelques problèmes à l'afficher correctement (couleurs, gestion transparence), c'est pourquoi personellement je l'évite encore un peu.

Résumé pour les images

<img src="adresse_de_votre_image.jpg/gif/png" alt="Texte de remplacement ..." />

Retour haut de la page