On a vu notre première page HTML, nous allons maintenant commencer à remplir cette page car vide elle ne nous sert pas à grand chose

Structurer son texte

Même si dans l’absolu on peut s’en passer il est tout de même important de placer son texte dans des éléments HTML. Ce afin de structurer son texte car c’est le but même du HTML et cela permettra également de pouvoir lui appliquer une feuille de style (CSS) plus facilement.

Les paragraphes

C’est la balise de base pour intégrer votre texte, il suffit juste de mettre tout ça entre les balises ‹p›…‹/p›.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula, diam semper venenatis tincidunt, sapien risus vulputate velit, id porta nulla nunc eu dui. Nullam fermentum urna vel velit blandit ac varius neque scelerisque. Aenean non suscipit nulla. In pellentesque pretium eros, vitae vehicula quam luctus eu.</p>

Les titres

Il y a 6 niveaux de titre allant de ‹h1›…‹/h1› à ‹h6›…‹/h6›

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Les liens

On peut avoir besoin de rediriger un internaute vers une autre page du site, un autre site internet, une ancre dans la page ou encore faire un lien vers une image ou un autre fichier. Pour cela rien de bien compliqué, il suffit de renseigner dans l’attribut href à l’aide de la cible du lien.

<a href="http://www.google.fr">Google</a>
<a href="http://www.web-petit.com/tutoriels">Tutoriels</a> ou <a href="/tutoriels">Tutoriels</a>
<a href="/wp-content/themes/wp-v2/images/ressource-32.png">Image ressources</a>

Les images

Pour mettre un peu de gaieté dans votre page vous pouvez décider d’y intégrer des images. L’attribut src permet de renseigner l’emplacement de l’image. L’attribut alt permet d’afficher un texte de remplacement au cas où l’image ne peut pas être chargé, par exemple si l’attribut src est mal renseigné. L’attribut alt est très important en terme d’accessibilité. Veillez à toujours le renseigner avec une description de l’image. C’est d’abord indispensable dans la validation W3C de votre page. Mais cela permet également aux personnes déficientes visuelles de savoir ce que représente l’image.

<img src="/wp-content/themes/wp-v2/images/ressource-32.png" alt="Ressources" />
<img src="" alt="Tutoriels" />