Petite leçon de HTML (3/4)

Comment remplir le corps de la page

Après ces détours que vous avez pu trouver fastidieux (mais qu'il est important de respecter !) nous allons commencer à faire ce qui vous intéresse : remplir la page avec ce que vous voulez que les utilisateurs voient. Tout ce que vous voulez montrer à l'utilisateur doit se trouver entre les balise <body> et </body> de votre page.

 

Créer des paragraphes et des titres de paragraphes

Votre page va, selon toute vraisemblance, contenir du texte. En HTML, le texte doit toujours se trouver dans un paragraphe. Comme je l'avais indiqué sur la première page de cette leçon, un paragraphe se crée avec la balise <p> comme ceci :

<p>Ceci est un paragraphe.</p>

N'oubliez pas la balise fermante </p> ! Vous commencez à prendre l'habitude de la balise fermante. Vous voyez que ça n'est pas bien compliqué.

Je vous le rappelle : le HTML est un langage de structure. Les paragraphes vont donc constituer des rubriques. Vous allez donc regrouper les paragraphes sous des titres de rubriques. Pour créer un titre de rubrique, on utilise les balises <h1>, <h2> <h6>. Ces balises sont d'importance décroissante ; votre rubrique principale (ou le titre affiché de votre page, par exemple) utilisera la balise <h1> tandis que la moins importante utilisera la balise <h6>. Là encore n'oubliez pas les balises fermantes correspondantes. Voici à quoi peut ressembler le corps de votre page :

<body>
	<h1>Bienvenue sur ma page !</h1>
	<p>Petite introduction sur ce site.</p>
	
		<h2>Première partie</h2>
		<p>Un paragraphe intéressant</p>
		<p>Un autre paragraphe.</p>

			<h3>Première sous-partie</h3>
			<p>Un paragraphe court.</p>
			<p>Un autre plus long.</p>
		
		etc.

</body>

 

Insister sur certains parties de votre texte

Pour insister sur certains parties de votre texte, utilisez les balises <em></em> ("em" venant de emphasize, qui signifie mettre l'accent en anglais).

<p>Vous insistez ainsi sur les <em>mots importants</em> de votre texte.</p>

La plupart des navigateurs rendent le texte ainsi balisés en écriture italique. De la même manière, vous pouvez utilisez les balises <strong></strong>, que la plupart des navigateurs rendent par du texte en gras. Cela dit, je vous recommande pour l'instant de ne pas trop vous préoccuper du rendu de votre texte. Contentez-vous donc de la balise <em>.

 

Créer des liens

L'intérêt principal du Web, et ce qui explique son succès, c'est la possibilité de créer des liens entre différentes pages. Les liens se créent grâce à la balise <a>. Voici un exemple de lien :

<a href="http://www.lemonde.fr" title="Vers le site du Monde">Lien vers le site du Monde</a>

L'attribut href permet d'indiquer l'adresse (ou URI) de la page vers laquelle vous voulez que le lien emmène le visiteur. Vous pouvez utilisez une adresse relative, c'est-à-dire une adresse définie par rapport à la page que vous êtes en train d'écrire. Par exemple, si vous vous voulez faire un lien vers une page dans le même répertoire que cette page, vous pouvez simplement écrire href="page2.html".

L'attribut title n'est pas obligatoire mais je vous l'impose. Il permet par exemple d'illustrer votre lien par un petit message qui apparaît lorsque vous laissez la souris sur le lien sans cliquer (dans certains navigateurs). Il permet également aux déficients visuels d'avoir une aide sur le lien. Prenez donc la bonne habitude de l'utiliser pour chacun de vos liens.

Voici ce que donne un tel lien : Lien vers le site du Monde, à ceci près que le mien est mis en forme, le vôtre pas encore mais ça viendra dans une autre leçon.

 

Insérer des images

Vous pouvez insérer des images sur votre page, pour la rendre un plus vivante. Pour cela, utilisez la balise <img> comme ceci :

<img src="/photos_souvenirs/eiffel.jpg" alt="Vue de la Tour Eiffel">

L'attribut src indique l'adresse de l'image. Comme pour un lien, elle peut être absolue (par ex. http://www.lemonde.fr/imageaupif.jpg) ou relative (notre exemple affichera l'image eiffel.jpg située dans le sous-répertoire photos_souvenirs).

L'attribut alt est obligatoire. Il permet d'afficher un texte de remplacement si l'image ne s'affiche pas, par exemple pour les navigateurs textuels. Mettez-vous à la place de ceux qui ne voient pas la photo en rédigeant ce texte alternatif.

 

Insérer des listes à puces

Les listes à puces sont très utiles pour faire des menus de navigation par exemple : il vous suffit alors d'énumérer les pages sur lesquelles on peut cliquer. (C'est cette technique qui est employée sur mon site.)

Une liste à puces se place entre les balises <ul> et </ul>, ul signifiant unordered list. Ensuite, il faut déclarer chaque élément de votre liste en l'enfermant entre les balises <li> et </li> (li pour list element).

Voici un exemple simple de liste :

<ul>
	<li>Premier élément de la liste</li>
	<li>Deuxième élément</li>
	<li>Troisièmé élément</li>
</ul>

Si vous voulez utiliser les listes pour créer un menu de navigation (technique fortement recommandée), il suffit de placer des liens vers les autres pages de votre site entre les balises <li> et </li>.

Pour créer une liste ordonnée (1, 2, 3 …) il suffit de remplacer la balise <ul> par la balise <ol>.

 

Conclusion

 

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French