Les balises HTML (ou éléments)
Voici quelques exemples de balises HTML que vous pouvez utiliser pour construire vos articles.
Les <div>.....</div>
Les "div", souvent appelées "calques", sont en réalité des divisions dans la page. Cela vous permet de regrouper dans un bloc tout un ensemble d'éléments. Grâce aux calques, vous pouvez organiser votre page et obtenir des résultats impressionnants. Seulement, l'usage des calques demande une intervention aux niveaux des styles et cela sort du cadre prévu par ce document.
Les titres <h1>...</h1>, <h2>...</h2> etc.
Les balises "<h1>...</h1>", "<h2>...</h2>", "<h3>...</h3>", "<h4>...</h4>", "<h5>...</h5>" et "<h6>...</h6>" sont utilisées pour hiérarchiser votre contenu.
Lors que vous saisissez un texte, pensez à respecter cette notion d'hiérarchie. D'une manière générale, nous utiliserons le h1 pour le titre de la page (ou de l'article), puis le h2 et h3 comme des sous-titres.
Il est très important de vérifier que les balises ouvertes soient fermées: <h2>Le Titre</h2>.
Paragraphe <p>...</p>
La balise de paragraphe permet de créer un bloc de texte, comme dans un traitement de texte classique. Tout le texte entre les balises "<p>" puis fermée avec "</p>" sera affiché dans le même bloc de texte. Exemple:
<p>Voici votre texte sur plusieurs lignes....</p>
Le <br /> ou Breakline
Vous pouvez utiliser un saut de page pour forcer le passage à la ligne d'un texte incorporé dans un paragraphe. Cela aura pour effet de passer le texte à la ligne sans que le paragraphe soit terminé.De la même manière, vous pouvez utiliser le saut de ligne dans une balise de titre. Cela permet de couper le texte en deux ou plusieurs lignes.
Exemple: <h2>...... <br />...... </h2>
La balise de saut de ligne est unique. Elle n'a pas de balise de fermeture. Pour cette raison, en XHTML, il a été convenu qu'il serait obligatoire l'utilisation d'un "/" à l'intérieur des balises uniques afin d'indiquer qu'il s'agit d'une balise auto-fermante. En HTML5, cette obligation est devenue juste une recommandation. Vous pouvez donc utiliser la balise en indiquant <br> ou <br />. Nous estimons qu'il est préférable d'utiliser <br />.
Les images <img src="/" alt="texte de remplacement" />
De même que pour les sauts de ligne, la balise image <img src="/..." /> est auto-fermante et il est recommandé d'utiliser la barre oblique "/".
Une autre recommandation concerne l'utilisation de l'attribut de texte alternatif. Cela améliore le référencement et renseigne les utilisateurs de logiciels de lecture pour les non voyants. Cela vous permet aussi d'afficher un texte au cas où l'image ne se charge pas pour une raison inattendue.
Ancre ou lien <a>...</a>
Nous pouvons utiliser la balise <a>...</a> pour deux situations différentes:
- En tant qu'un signet ou ancre, c'est à dire une balise nommée qui donnera un repère à l'intérieur d'une page. Dans ce cas la balise se présentera comme ceci: <a name="Mon_Signet"></a>
- L'utilisation la plus courante de la balise <a>...</a> consiste à créer un lien hypertexte d'une page à l'autre. Dans ce cas nous devons inclure un attribut "href" avec lequel nous indiquerons le lien.
Exemple: <a href="/ma_page.html" >Texte visible</a>
- Si nous avons prévu un signet dans un document, nous pouvons y accéder par le lien suivi par dièse et le signet.
- Voici un exemple: <a href="/ma_page.html#Mon_Signet" >Texte visible</a> (ici le lien pointe vers "ma_page.html" et le signet "Mon_Signet")
- Voici un autre exemple: <a href="#Mon_Signet" >Texte visible</a> (ici le lien pointe sur le document en cours et permet d'accéder à l'endroit où nous avons placé l'ancre.
- Il est possible d'utiliser une image pour "porter" le lien. Dans ce cas: <a href="http://Mon_Lien..." ><img src="/mon_Image" /></a>
Les balises de mise en forme
Presque toutes les balises peuvent être réglées selon un nombre important de paramètres dans un fichier de feuille de style (un CSS ou Cascade Style Sheet). Par ces réglages, vous pourriez détourner une balise pour un usage spécifique, même si cela relève d'un usage avancé du HTML et CSS.
Les balises de mise en forme sont, à la base conçues pour l'utilisation suivante:
- <b>...</b> En règle générale le texte s'affichera en gras; Il existe une variante pour cette balise: <strong>...</strong>
- <em>...</em> mettre le texte en valeur (emphase) par l'inclinaison (italique) du texte. Par défaut, la balise <em>...</em> a le même aspect que la balise <i>...</i>, cependant le contexte d'utilisation n'est pas le même et la balise "em" est recommandée;
- <cite>...</cite> Peu connue, cette balise est prévue pour définir un titre. Exemple: <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
- <u>...</u> souligne le texte;
Exposant <sup>...</sup> et indice <sub>...</sub>
Si votre texte doit être en exposant, vous pouvez utiliser la balise <sup>...</sup>. Exemple: <b>ARCADE<sup>®</sup></b>.
Pour obtenir le "R" de ®, sur un PC, vous pouvez maintenir la touche "ALT" appuyée et saisir au pavé numérique le code 0174. Cela donnera ®.
Un autre exemple en indice cette fois: h<sub>2</sub>o donnera h2o.
Les attributs
Vous pouvez passer un certain nombre de paramètres à l'intérieur des balises. Ce sont les attributs, grâce auxquels, vous pourrez indiquer une option spécifique à telle ou telle balise.
Voici quelques exemples importants à connaître:
- class="...." - Cet attribut permet d'associer une classe à un élément, c'est à dire un style ou une règle CSS prédéfinie. Nous avons préparé une liste de classes utiles pour le site que vous pouvez consulter. Les classes sont associées à plusieurs éléments dans la même page et qui doivent avoir le même aspect. Cependant, la même classe peut avoir des caractéristiques différentes selon sont contexte. Cette situation est prévue au moment de la conception du site.
- id="..." - Cet attribut permet d'associer un identifiant à un élément dans la page du site. Cet identifiant doit rester unique.
- name="...." - Permet de nommer un élément qui sera unique dans la liste d'éléments du même type.
- align="center" - permet de centrer le contenu d'un texte ou d'une "div". Exemples: <div align="center">Mon texte</div> ou encore: <p align="center">Mon texte</p>
- ...
Les <span>....</span>
La balise span permet d'associer une classe ou un style à une partie du texte contenue dans un paragraphe, un titre... À l'intérieur de l'éditeur HTML cette balise n'est autorisée que si elle porte un attribut de classe.
Voici un exemple d'utilisation:
<p>Votre texte normalement en noir et ici <span class="txt_Bleu">un texte qui s'affichera</span> en bleu.</p>
