Dans le chapitre précédent nous avons vu entre autres comment structurer son texte avec les balises de paragraphes et les titres, dans celui-ci nous allons approfondir le sujet.

Les listes

Il existe plusieurs types de listes : les listes non ordonnées, les liste ordonnées et les listes de définitions.

Les listes non ordonnées (ul)

Les listes non ordonnées aussi appelées listes à puces servent comme leur nom l’indique à lister des éléments de contenu sans ordre particulier. Chaque élément de la liste est placé dans une balise double li.

<ul>
  <li>Pommes,</li>
  <li>Bananes,</li>
  <li>Poires,</li>
  <li>Oranges.</li>
</ul>

Les listes ordonnées (ol)

Les listes ordonnées servent comme leur nom l’indique à lister des éléments de contenu dans un ordre particulier. Chaque élément de la liste est placé dans une balise double li.

<ol>
  <li>Bananes,</li>
  <li>Oranges,</li>
  <li>Poires,</li>
  <li>Pommes.</li>
</ol>

Les listes de définitions (dl)

Les listes de définitions comme leur nom l’indique servent à lister des définitions. Chaque terme à définir est placé dans une balise double dt et chaque définition dans une balise double dd.

<dl>
  <dt>Football</dt>
  <dd>Sport de gentilshommes pratiqué par des brutes.</dd>
  <dt>Rugby</dt>
  <dd>Sport de brutes pratiqué par des gentilshommes.</dd>
</dl>

Mise en valeur

Les éléments strong et em permettent de mettre le texte en valeur. Contrairement à ce que beaucoup croient, ils ne servent pas à mettre le texte en gras ou en italique. C’est juste que c’est leur comportement par défaut en CSS. Mais le réel intérêt de ces éléments concerne le référencement, c’est qu’ils permettent de signifier que le contenu placé dans ces éléments est important, aux moteurs de recherches, par exemple.

Mettre un peu en valeur (em)

L’élément em permet de mettre du texte un peu en valeur. Par défaut le contenu de cet éléméent est affiché en italique mais il est bien sûr possible de modifier ce comportement en CSS.

<p>Dans cette exemple, le mot <em>italique</em> est en est mis un peu en valeur.</p>

Mettre très en valeur (strong)

La balise strong permet de mettre du texte très en valeur. Par défaut le contenu de cette balise est affiché en gras mais il est bien sûr possible de modifier ce comportement en CSS.

<p>Dans cette exemple, le mot <strong>gras</strong> est en est mis très en valeur.</p>

Citation

Citation au sein d’un bloc (q)

L’élément q permet d’insérer une citation dans un élément de type bloc. Par défaut dans Mozilla, le texte est mis entre guillemets.

<p>Comme le disait si bien Lavoisier : <q>Rien ne se perd, rien ne se crée, tout se transforme.</q></p>

Bloc de citation (blockquote)

L’élément blockquote permet d’insérer une citation sous forme d’un bloc. L’attribut cite permet de renseigner l’URL de la citation.

<blockquote cite="http://fr.wikipedia.org/wiki/HTML5">HTML5 (HyperText Markup Language 5) est la dernière révision du principal langage du web, HTML. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5.</blockquote>

Le titre d’une référence (cite)

Avant HTML 5, l’élément cite permettait de citer le nom d’une personne. Mais dans HTML 5 ce n’est plus l’usage qui lui est destiné. Il convient maintenant de l’utiliser pour citer uniquement les titres de travaux (livre, poème, essai, jeu, film, etc…)

<p>Je sais que ce n'est pas très original pour un geek, mais je suis un grand fan du film <cite>le Seigneur des Anneaux</cite>.</p>

Abréviation

L’élément abbr permet d’insérer une abréviation ou un acronyme. La balise acronym n’existe plus en HTML 5. L’attribut title permet de renseigner ce que signifie l’abréviation ou l’acronyme.

<p>Je suis trop <abbr title="Mort de rire">MDR</abbr>, <abbr title="Laugh out loud">LOL</abbr>.</p>

Exposant et indice

Bon là je crois que l’exemple parlera de lui-même.

<p>Terme général d'une suite géométrique : U<sub>n</sub> = aq<sup>n-n<sub>0</sub></sup></p>

← Article précédent

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" />

Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).

<balise>

Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.

<balise>

<balise></balise>

Voici une page HTML 5 vide.

<!DOCTYPE html>
<html lang="fr"> 

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titre</title>

  </head>

  <body>

    <!-- Ici il y aura le contenu de votre page. -->

  </body>

<html>

Le type de document (DOCTYPE)

Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :

DOCTYPE HTML 5

<!DOCTYPE html>

DOCTYPE HTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élement html

<html lang="fr"></html>

‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.

L’élement head

<head></head>

L’élément head contient tous les en-têtes envoyés au navigateur comme :

• Le type de contenu de la page :

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• Le titre de la page :

  <title>Titre</title>

De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.

L’élément body

<body></body>

L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.

Les commentaires

<!-- Ceci est un commentaire -->

Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.

Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.

Ceci est le premier chapitre d’une longue (très longue) suite d’articles sur le HTML5 et CSS3. La plupart des personnes qui se soucient quelque peu de développement Web ont entendu parler de HTML5 et CSS3. Il existe pas mal de tutoriels, ou de suite de tutoriels sur le HTML et CSS mais ici nous nous occuperons des ces langages que dans leurs dernières versions qui font couler tant d’encre sur le Web. (De l’encre sur le Web, mais qu’est-ce que je raconte ? )

HTML5

Selon Wikipédia :

« HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d’HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2011. HTML5 spécifie deux syntaxes d’un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu’un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. »

Tout comme ses prédécesseurs, HTML 1.1 Strict par exemple, HTML5 est un langage de balisage qui sert à créer des pages Web. Jusque là je n’apprend rien à la plupart d’entre vous. Mais HTML5 intègre de nouvelles balises et  autres spécifications qui vont améliorer l’expérience utilisateur des internautes. Mais c’est aussi un atout à mes yeux pour les intégrateurs Web, qui vont pouvoir créer des sites meilleurs tant au niveau Web sémantique que dans l’intégration de nouvelles fontionnalités : vidéos, audio, etc…

CSS3

Voyons ce que dit Wikipédia au sujet de CSS :

« CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). »

CSS3 apporte son lot de nouveautés tels que les coins arrondis, les ombres, les dégradés, les transformations ou encore les transitions. Pour les Web designers, c’est une révolution. Les techniques qui s’apparentaient plus à la débrouille et au bidouillage et qui prenaient parfois un temps fou à la mise en place deviennent un jeu d’enfant.

Pour cette suite de tutoriels nous verrons séparément les bases du HTML et donc HTML5 puis nous intégrerons petit à petit (C’est un bon slogan pour le site ça, non ? C’est pourri vous avez raison… ) le CSS3 quand ce que nous aurons vu sur HTML5 sera suffisant.