Le B-A BA du HTML

Le langage HTML revient sur le devant de la scène avec la mise en chantier de la norme HTML en version 5. Occasion rêvée d'approfondir notre culture et de comprendre notre environnement de travail quotidien.

Le HTML est un langage de description de page. On pourrait comparer l'écriture en HTML avec celle d'un traitement de texte. Le traitement de texte permet d'enrichir un texte simple en lui ajoutant des informations sémantiques (citation, rehaussement...), structurelles (titres, listes...) et de forme (couleur, espacement).

De même, le langage HTML permet d'enrichir un texte publié sur le web en lui ajoutant des informations sémantiques, structurelles et de forme.
Simplement, au lieu d'être un langage dédié à un logiciel spécifique (Word pour Microsoft, Writer pour OpenOffice), HTML est universel car il fait l'objet d'une norme lui permettant d'être utilisé de la même façon sur tout le web. Une fois codée en HTML, la page est lisible par n'importe quel agent utilisateur respectant la norme en question, navigateur (Internet explorer, Firefox, etc), synthétiseur vocal, terminal Braille, robot de moteur de recherche...

Naturellement le HTML prend en compte les spécificités propres au web. Les liens hypertexte pointent vers une page ou plus généralement vers une ressource (video, document à télécharger...) et peuvent utiliser un protocole de communication propre au type de ressource à exploiter (mail, téléphone, video...).

Principe

Le langage HTML (HyperText Markup Language) n'est pas un langage de programmation mais de marquage, intégrant les particularités hypertexte, comme indiqué précédemment. Le marquage se fait à l'aide de balises :

  • balise de début et de fin pour la plupart des éléments : <p>paragraphe de texte...</p>
  • balise unique pour certains autres éléments, par exemple : balise de rupture de ligne <br />

Structure d'une page HTML

Toute page en HTML possède la structure suivante :

  • un en-tête (head), optionnel, permettant de fournir des informations sur la page elle-même et son contenu
  • un corps de page (body) contenant la partie visible de la page (textes, images...)

<html>
<head>
<title> </title>
<description> </description>
</head>
<body>
contenu visible de la page, structuré à l'aide de balises
</body>
</html>

Vous pouvez examiner la structure et les balises d'une page HTML dans votre navigateur en affichant son code source (menu Affichage-Source ou équivalent).

Balises HTML

Voici quelques exemples de balises HTML. Pour des raisons pratiques, leurs noms ont été choisis sur des bases mnémotechniques :
<p> pour paragraphe
<h1> <h2> <h3> pour les titres (header) de niveau 1, 2, 3...
<ul> pour liste non ordonnée (unordered list), dite " liste à puces"
<ol> pour liste numérotée (ordered list)
<em> pour rehaussé (embedded) ; un rehaussement apparaît généralement en italique
<strong> pour renforcé ; un renforcement apparaît généralement en gras
etc.

La balise de lien possède une structure analogue <a>lien hypertexte</a>, mais est dotée d'un paramètre permettant de pointer dans la page, vers une autre page (ou ressource) du même site ou vers une ressource externe. Ainsi le code

<a href="http://www.w3.org/TR/html5/">Norme HTML5</a> s'affichera dans votre navigateur de cette façon Norme HTML5, avec le lien pointant vers la norme du W3C.

Et pour finir...

Voici un exercice pratique. Créez un document à l'aide d'un simple éditeur de texte comme le Bloc-Notes de Windows, copiez dans ce documentt le texte suivant et modifiez-le comme bon vous semble, enregistrez le fichier avec l'extension .htm ou .html.

<html>
<h1>Ma première page en HTML</h1>
<h2>Mes goûts</h2>
<p>J'aime les <em>chansons populaires</em>, ainsi que</p>
<ul>
<li>les pommes</li>
<li>les poires</li>
<li>et les scoubidous</li>
</ul>
<h2>Mes loisirs</h2>
<p>Le foot, mais dans mon canapé, avec une bonne bière</p>
<h2>Conclusion</h2>
<p>Le HTML, finalement c'est très simple !</p>
</html>

Double-cliquez sur le document ainsi créé. Il s'ouvre dans votre navigateur et vous pouvez admirer votre première page œuvre en HTML...

Commentaires

Ajouter un commentaire

Un avis, une contribution ? A vous de jouer.




Dans la série suivante : 9 2 8 1 3 4 7 6 5 -  

Abonnement

Recevez les nouveaux articles par e-mail



...ou par notre flux RSS

Articles