Cette page en format PDF

Le B.A-BA du HTML

Que contient une page web ?

Une page Web, tout comme une page de texte rédigée avec n'importe quel traitement de texte contient principalement du texte, des images et des liens.

• du texte

Le texte d'une page Web est plus qu'une simple suite de caractères tous affichés de la même manière. Les titres sont mis en évidence par rapport aux paragraphes. Certains sont mis en italique ou en gras pour attirer l'attention, d'autres encore peuvent être mis en couleur, les fontes peuvent changer etc. Les directives ou autre manière de les appeler, les commandes ou les instructions qui concernent la présentation du texte sont cachées dans le texte. Elles sont destinées aux navigateurs.
La largeur de la fenêtre dans laquelle le navigateur affiche la page est ajustable par le lecteur. C'est donc le navigateur qui décide où faire les retours à la ligne à des endroits où pourtant l'auteur de la page n'a pas prévu de retour à la ligne. Il suffit pour s'en convaincre de faire varier la largeur de la fenêtre qui contient la page que vous lisez pour l'instant.

• des images

Les images qui apparaissent comme partie intégrante de la page sont des documents associés au texte par des commandes inscrites dans le texte et destinées aux navigateurs. Ces derniers au lieu d'afficher le texte de ces commandes les interprètent et montrent les images demandées.

• des liens

Les liens sont le plus souvent des mots qui apparaissent en bleu et sont soulignés. Le lien est dans ce cas un fragment de texte auquel on a associé une information rendue invisible à l'affichage de la page mais qui est bien présente puisqu'elle indique l'adresse de la nouvelle page à afficher.

On voit donc qu'il y a dans le code que contient la page, non seulement le texte qui s'affiche mais aussi des instructions qui bien qu'elles ne soient pas affichées par le navigateur vont influencer la manière dont il affichera la page. (Mise en page, insertion de liens, d'images etc.)

Les commandes, directives ou instructions (autres mots pour le dire) que l'on place dans une page Web se font dans un langage appelé HTML HyperText Markup Language et destiné principalement aux navigateurs.

Rédaction d'une petite page web

Le but de cette page est de montrer le plus rapidement possible comment faire pour créer une page Web. On se limite à l'essentiel. Le sujet est vaste et ceux qui veulent en savoir plus trouveront au bas de cette page une liste de sites qui présentent le HTML de manière bien plus complète.

Programmes d'édition de pages Web

L'utilisation de traitement de texte vous a sans doute habitué à utiliser le même logiciel pour éditer un document que pour le lire.
Ce sera différent pour les pages Web. Il faut distinguer la page telle qu'elle est affichée au final par les navigateurs, du code source de la page dans lequel apparaissent les directives d'affichage ou balises dont nous parlons plus bas.
Chaque navigateur possède une commande pour visualiser le code source. Ce sera par exemple : Affichage > Code source de la page ou le raccourci clavier Ctrl+U pour Mozilla Firefox.

Les logiciels pour éditer les pages web doivent non seulement afficher mais aussi permettre la rédaction des directives  qui définisent la structure (titres, paragraphes, images etc.) et la présentation (tableau, alignements, styles etc.) de la page.

En principe, un simple éditeur de texte suffit. On pourrait par exemple se servir de Notepad, le bloc-notes de Windows. J'encourage mes étudiant(e)s à utiliser Notepad++ dans un premier temps. C'est un éditeur de texte bien plus performant qui facilite la tâche en colorant les symboles. La distinction entre le texte à afficher des balises s'en trouve grandement facilitée.

Il existe bien sûr des éditeur WYSIWYG "What You See Is What You Get" qui rendent possible l'édition d'une page telle qu'elle apparaîtra dans le navigateur. L'utilisation de ces éditeurs est assez intuitive et les débutants penseront sans doute que je me plais à leur compliquer la vie en leur recommandant de se passer ces logiciels pour commencer.
Exercez-vous d'abord à écrire deux ou trois pages web avec uniquement Notepad++. Le but est de bien comprendre le fonctionnement des balises et la structure fondamentale d'une page WEB. C'est indispensable dans un premier temps pour comprendre ce que font les éditeurs WYSIWYG et pour savoir les comparer avant d'en adopter un.

Les balises

Les balises ou "tags" servent de commandes au navigateur. Ce sont les instructions du langage HTML. Elles sont insérées dans le texte à afficher et sont placées entre les signes < et > pour se différencier du reste du texte affiché par le navigateur.

Il existe deux types de balises, les conteneurs et les marqueurs :

Les balises HTML peuvent indifféremment s'écrire en majuscules ou en minuscules mais il faudra obligatoirement les écrire en minuscule quand nous utiliserons le XHTML. Autant prendre cette (bonne) habitude dès le départ.

Structure minimum d'une page

Le plus élémentaire des documents HTML contiendra au minimum ces balises :

<html>
    <head>
        <title>   Exemple de titre </title>
    </head>

    <body>
         Exemple de page élémentaire

    </body>
</html>

Les balises   <html> et   </html> indiquent le début et la fin du document HTML.
L'entête   <head>  ...   </ head > contient le titre <title>  ...   </title> qui apparaîtra dans la barre de titre de l'explorateur
Les balises   <body>  et   </ body > encadrent le corps du document proprement dit.

Paragraphes

<p> ... </p>
Un paragraphe est un bloc de texte composé de lignes qui se suivent. Il est généralement séparé du suivant par un espace qui équivaut à une ligne vide.
- Le début d'un paragraphe est marqué dans le code source par la balise <p> 
- La fin du paragraphe est marquée par la balise de fermeture correspondante </p>

Titres

Nous ne parlons pas ici du titre de la page, celui qui apparaît dans la barre de titre du navigateur. Les titres dont il s'agit ici sont les titres qui découpent la page en annonçant les sujets qui y sont successivement présentés.
Les niveaux de titres sont hiérarchisés selon 6 niveaux. Tout comme les paragraphes les titres sont entourés par deux balises. Ce seront par exemple <h1> et </h1> pour les titres les plus importants comme le titre "Le B.A-BA du HTML" au début de cette page.

Le titre "Structure minimum d'une page" ici plus haut est de moindre importance. Il a été défini par les balises <h2> et </h2>

Les titres "Paragraphes" et "Titre" apparaissent plus petits encore. Ils sont annoncés au navigateur par les balise <h3> et </h3>

<html>
  <head> 
        <title>Titres et paragraphes </title>
    <head> 

    <body> 
        <h1>Titre Principal</h1 > 
        <h2>Titre secondaire</h2 > 
        <p> Ceci est un paragraphe. Le navigateur placera automatiquement des
              retours à la ligne où cela sera nécessaire pour que le texte s'ajuste à la
              largeur de la fenêtre.  </p > 
        <p>Ceci est un autre paragraphe. Deux paragraphes sont toujours séparés
              par un retour à la ligne. Ils apparaissent généralement comme séparés
              par une ligne vide.</p > 

      <h2> Autre titre de niveau 2</h2> 

      <h3> Sous-titre de troisième niveau</h3> 
       <p>Autre paragraphe</p >

    </body> 
</ html >

Certes, le résultat n'a rien d'exceptionnel mais rappelons-le il s'agit ici des Ba-BA du langage.
Je recommande vivement aux débutants de taper ce code avec un simple éditeur de texte puis d'observer ce que donne ce code avec un navigateur. Il est important d'encoder ces balises "à la main" d'abord, avant de tester ce même code avec un éditeur WYSIWYG.


Les liens hypertextes

Sans eux, impossible de surfer d'une page à l'autre, le web n'existerait pas !

Les liens s'indiquent par les balises d'ancrages <a href="..."> ... </a>
L'attribut href="..." indique la destination du lien. Le plus souvent (si le navigateur n'a pas été reconfiguré autrement) le texte compris entre les balises d'ouverture et de fermeture apparaît en bleu et est souligné.  Mais on peut aussi y mettre une image.  Elle est alors encadrée en bleu par le navigateur pour indiquer sa fonction de lien.

Liens vers d'autres sites
<a href="http://www.rtbf.be"> RTBF </a>

Liens entre fichiers du même dossier
<a href ="Courriel.html"> Le courrier électronique </a>

Liens vers un fichier dans un dossier différent
<a href="../Hard/ACDC.html"> Le courant alternatif </a>

Pour se rendre en un point particulier d'un document, il faut d'abord y mettre un signet que l'on désigne par un nom.  C'est le rôle de l'attribut name : <a name="haut"> dans ce cas précis une balise de fermeture </a> est inutile.

Liens locaux = dans la même page :
Associer un lien à ces cibles: <a href="#haut"> Allez en haut de la page </a>

Lien vers un point d'ancrage dans un autre fichier
<a href="../Techno/PortesLogiques.html#DemiAdd"> Le demi additionneur </a>

Lien vers un e-mail
<a href="mailto:toto@hotmail.com"> toto@hotmail.com </a>


Images

Formats des images

Les images sont comprimées pour optimiser leur vitesse de transmission.
La compression JPEG convient pour les photos aux couleurs nuancées.
Le format GIF est plus efficace pour les images composées d'à-plats de couleurs unies. En GIF, l'une de ces couleurs peut être transparente et ces images peuvent être animées.
Le format PNG s'adapte aussi bien aux photos qu'aux à-plats de couleurs mais la compression dans ce format est parfois moins bonne.
Voyez à ce sujet le document au format pdf sur les extensions de nom de fichier issu du cours d' initiation à l'informatique ainsi que l'exercice sur les extensions

Où sont les images ?

Les images ne font pas partie de la page. Elles y sont référencées par la balise <img> toujours accompagnée de l'attribut "source" qui indique l'adresse de l'image.   < img src ="url" />

Dimensions et autres attributs

compas La mise en page est plus rapide si le navigateur est informé des dimensions de l'image avant que celle-ci n'arrive.
<img   src="compas.gif"   width="57"   height="100"   align="right"   alt="compas"   />
On peut indiquer une hauteur et une largeur différente pour modifier l'échelle de l'image.

L'attribut "align" est très souvent utilisé pour positionner l'image par rapport au texte.

L'attribut "alt" donne à l'image une légende qui apparaît en attendant que l'image se charge.
C'est une "alternative" pour les navigateurs qui ne reproduisent pas les images (s'il en reste).

Images utilisées comme liens hypertextes hypergraphiques

Voici par exemple le code qui fait d'une image un lien vers le sommaire de ce cours.
Sommaire
<a href ="index.html" > <img src="Images/Sommaire.gif" align="right" alt="Sommaire" /> </a>


Propositions de sites pour aller plus loin que ce B.A-BA

XHTML 1.0 validé! CSS validé!