Search Menu

Basic : introduction rapide au HTML

Carte postale by PaperCactus
Illustration : Carte postale de PaperCactus

La grammaire pré-machée du HTML

Tout language a sa grammaire. En HTML, la grammaire, ce sont les balises html. Ces balises encadrent les mots ou les groupes de mots et permettent de structurer les phrases. Grosso modo, c’est un peu comme si pour dire « Ce gateau au chocolat est délicieux » , j’écrivais quelque chose comme :

<sujet>Ce gateau au chocolat</sujet> <verbe>est</verbe><adjectif>délicieux</adjectif>.

Cela simplifierait les cours de grammaire, tout serait déjà pré-maché (par contre, bonjour, quand tu veux écrire un roman).

En HTML, les balises sont simples à repérer . Comme dans mon exemple, elles se présentent sous cette forme <balise> ou </balise>. A de rares exceptions près, on ouvre une <balise> et on ferme ensuite cette </balise> (avec un slash) pour indiquer les propriétés de l’élément encadré par les deux balises. Les balises fonctionnent comme les parenthèses : quand on en ouvre une, il faut la refermer. On peut les imbriquer mais il faut penser à toutes les fermer et pour compliquer la tâche, il faut, de plus, les fermer dans le bon ordre. Par exemple :

<balise 1>
      <balise 2>
             Ce gateau  au chocolat est <balise 3>délicieux</balise 3>.
      <balise 2>
<balise 1>

Les balises HTML de base

La structure de la page

<!DOCTYPE html>
Commençons par un cas particulier, dont pour l’instant nous n’avons pas réellement besoin de nous préoccuper. Disons simplement que cette balise doit être obligatoirement présente telle quelle, avant tout autre élément de la page, et qu’elle indique au navigateur quel est le type exact du document HTML qui suit.

<html></html>
Tout votre contenu html doit se trouver entre ces deux balises.

<head></head>
La balise head permet de définir l’en-tête de votre page : c’est là qu’on met les informations importantes sur la page, comme son titre (celui qui s’affiche tout en haut du navigateur et dans les moteurs de recherche) par exemple mais la plupart des informations contenus entre ces deux balises ne sont pas visibles. Ce sont des informations sur l’encodage de votre page, des informations pour les moteurs de recherche, …

<body></body>
C’est le corps de votre page. C’est là qu’il faut mettre le contenu de votre page.

Les paragraphes

<p></p>
Ces balises indiquent les paragraphes de votre document.

Les titres

<h1></h1>, <h2></h2>,  <h3></h3>, …<h6></h6>
Ce sont des balises de titres. Le numéro indique l’importance du titre. Plus un titre est important, plus il apparaitra en gros sur la page (sauf si vous modifiez le style des titres).
h1, c’est le titre principale de votre page : le plus important.
h2, c’est un sous-titre. h3, un sous sous-titre … Et on peut aller jusqu’à 6 niveaux de titre et sous-titres. Ces balises n’ont pas qu’un rôle esthétique, elle sont également très importantes pour le référencement de votre page.

Les images

<img>
Voilà une balise un peu différente (il faut bien qu’il y est quelques petites exceptions, sinon ce ne serait pas drôle). Pour les images, pas besoin d’une ouverture puis d’une fermeture de balise et l’on ne met pas de contenu au milieu. Il s’agit d’une balise auto-fermante et on utilise un attribut src (source) pour indiquer l’url de l’image. Cela donne :

<img src= »ici on met l’url de l’image entre guillements » />

Notez le slash à la fin, qui permet de fermer tout de même la balise.

Les liens

<a></a>
La balise <a> est la balise de lien.
Ici aussi on ajoute un attribut href pour indiquer l’adresse du lien et on indique le texte sur lequel on va cliquer entre les deux balises <a> et </a>. Ce qui nous donne :

<a href= »ici on met l’url du lien entre guillemets »>et ici on indique le texte à afficher pour le lien</a>

A noter :  vous pouvez imbriquer les balises par exemple pour faire un lien sur une image, ce qui nous donnerait :

<a href= »url du lien »><img src= »url de l’image » /></a>

Les listes

<ol></ol>
Ce sont des listes ordonnées (ou listes numérotées). Elles sont hierarchisées par ordre d’importance et chaque élément apparait précédé d’un numéro, comme une liste d’acteurs classés par intérêt décroissant (et dont on peut discuter en commentaires si vous le souhaitez)

1. Ryan Gosling
2. Romain Duris
3. Daniel Craig

<ul></ul>
Ce sont des listes non ordonnées (ou listes à puces), comme une liste de courses par exemple :

      • Ryan Gosling
      • Romain Duris
      • Daniel Craig

<li></li>
Ces balises entourent les différents éléments (ou items) d’une liste .

Ce qui nous donne par exemple pour la liste à puce précédente :

<ul>
  <li>Ryan Gosling</li>
  <li>Romain Duris</li>
  <li>Daniel Craig</li>
</ul>

A noter :  parfois, vous verrez que les listes ordonnées ou non ordonnées s’affichent sans puce ou numéro. Pourquoi ? Parce qu’on leur a ajouté un style, souvent dans votre fichier style.css, lui indiquant de ne pas les afficher.

Les styles de textes

<strong></strong>
Permet de mettre le texte en gras

<em></em>
Permet de mettre le texte en italique.

A noter : pour le reste, il faut utiliser l’attribut style ou une feuille de styles css.

Les tableaux

<table></table>
Permet de créer un tableau.

<tr></tr>
Permet de créer des rangs dans notre tableau.

<td></td>
Permet d’ajouter des données dans notre tableau.

Pour créer un tableau à deux colonnes, il faut ajouter deux séries de données à chaque rang. On aura donc :

<table>
 
  <tr>
    <td></td>
    <td></td>
  </tr>
 
  <tr>
    <td></td>
    <td></td>
  </tr>
 
</table>

<tbody></tbody>
Est utilisé pour définir la partie du tableau qui concerne les données

<thead></thead>
Est utilisé pour définir la partie du tableau qui concerne les titres des colonnes.

<th></th>
Dans le thead, pour ajouter des données, on utilisé pas <td> mais <th>. Par contre, on utilise bien <tr> pour les rangées.

Dans notre exemple, si on veut ajouter une première rangée avec les titres des colonnes, cela donne donc :

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
 

 

Bon à savoir : si vous voulez qu’une des données prennent plusieurs colonnes, il faut utiliser l’attribut colspan et lui indiquer le nombre de colonnes concernées, ce qui nous donne par exemple.

<th colspan="3">Mon titre sur 3 colonnes de tableau <th>

 

Les balises universelles

Ces balises vont servir pour presque tout le reste et vous permettra notamment d’ajouter un style quand aucune autre balise ne convient.

<div></div>

Les div sont des divisions. Pour faire simple, disons que ce sont des blocs ractangulaires, à qui ont peut ajouter un style : par exemple, un fond de couleur.  Vous allez en voir beaucoup dans les thèmes de blog. Elles vont contenir différentes parties de votre site : par exemple, vous aurez certainement une div pour l’en-tête (header) de votre blog qui comprendra notamment votre bannière, le nom de votre blog et son sous-titre, une autre pour la sidebar, etc. Elles peuvent être imbriquées les unes dans les autres.

<span></span>

 Les spans sont de plus petites parties de votre site, par exemple, un texte.

Bon à savoir

Vous pouvez ajouter des commentaires à votre page HTML. Pour cela il suffit d’encadrer votre texte par <!– et –>, comme ça :

<!– comment –>

Les commentaires sont bien utiles pour ajouter une note, se souvenir de l’endroit où l’on a modifé quelque chose et ne sont pas pris en compte pour l’affichage de votre page.

 Les attributs

On a commencé à en parler rapidement dans certains exemples, mais les balises peuvent avoir des attributs. C’est le cas de la balise <img> pour indiquer la source de l’image à afficher avec l’attribut src ou de la balise <a> pour spécifier l’url du lien avec l’attribut href. D’autres attributs existent et permettent d’indiquer des options pour la balise. Par exemple, vous pouvez utiliser l’attribut target pour indiquer si votre lien doit s’ouvrir dans une nouvelle fenêtre.

Je vous conseille d’aller sur ce site pour faire plus amples connaissances avec les balises html5 et leurs attributs.

 

Savoir tout ça, à quoi ça sert ?

Quand vous allez modifier votre thème, vous allez rencontrer toutes ces balises. Savoir à quoi elles correspondent vous permettra de mieux comprendre le document que vous aurez sous les yeux et gagner du temps si vous voulez  le modifier ou changer le style des différents éléments de votre site.

Rassurez-vous : apprendre quelques rudiments de HTML, c’est un peu comme les cours de grammaire. C’est un peu chiant au début mais cela s’avère très utile pour comprendre un texte et cela devient vite intuitif de repérer le sujet, le verbe et l’adjectif d’une phrase.

Grace à ces notions, vous devriez – par exemple – pouvoir plus facilement comprendre comment mettre des numéros devant vos commentaires et modifier vos fichiers sans tout casser. Une idée ?

 

À propos de Laetitia

J'aime le papier, je déteste la paperasse.

Lire ses billets - Découvrir son blog

13 Comments Write a comment

  1. Je retiens surtout qu’on peut R. Gosling sur sa liste de course^^ #CancredelaGrammaire

    Reply

  2. Avec R. Gosling je veux bien faire du HTML et les courses touuusss les jours ;)

    Reply

  3. Pingback: Basic CSS : Margin et padding, qui est qui ? | Do It Yvette

  4. Hello « Yvette » !
    Merci pour ta liste de course ;)
    J’utilise actuellement un blog définit par Canalblog, sommaire, pratique… moyen moche.
    Alors voilà, quand je passe en mode html, je comprends toutes ces petites balises pour changer le contenu de ma page…
    Ce que j’adorerai surtout, c’est savoir comment créer le « contenant ». Par exemple sur Do It Yvette, il y a un fond, une en-tête, un menu, une colonne centrale et quelques blocs sur les côtés. Envisages-tu un jour de poster un article sur la création d’un modèle de blog ?
    Merci !

    Reply

  5. Mais c´est juste trop bien !!!!!! Depuis le temps que je n´y comprends rien, là je commence à me dire qu´il y a un espoir !!! ENCORE !!!!
    :)

    Reply

  6. Pingback: Référencement : comment et quand mettre un lien en nofollow ? | Do It Yvette

  7. Pingback: CSS : mettre en forme vos textes (partie 1) | Do It Yvette

  8. Super cet article, depuis le temps que je cherchais une explication simple et claire sur les bases du html !!! C’est très clair, merci bcp !!

    Reply

  9. Pingback: Html | Pearltrees

Leave a Comment

Required fields are marked *.