Le langage HTML (HyperText Markup Language) est un langage de description de pages. C’est lui qui permet d’écrire les pages web. Sa structure est très simple : un fichier HTML (extension .htm ou .html) est un fichier texte qui comporte des balises (en anglais : tags) décrivant la mise en forme du document. Pour écrire une page web, un simple éditeur de textes suffit : on peut utiliser le Bloc-Notes de Windows, ou un éditeur un peu plus sophistiqué comme Sublime Text qui permet notamment la coloration syntaxique.
On pourrait se demander quel est l’intérêt d’utiliser un simple éditeur de textes pour créer une page web, alors qu’il existe des logiciels permettant de les réaliser en mode Wysiwyg (What You See Is What You Get), comme Microsoft WordTM ou Microsoft FrontPageTM. La raison est que ces logiciels, très simples d’utilisation, ont tendance à faire des codes lourds et non optimisés, ce qui alourdit d’autant le chargement des pages web ainsi réalisées. De plus, une connaissance, même sommaire, du code HTML permet de comprendre et de modifier des pages web facilement.
Structure de base d’une page HTML
A l’aide d’un éditeur de textes, taper le texte suivant :
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> Ceci est mon premier essai </body> </html>
Remarque : les retours à la ligne sont optionnels : ils ne servent qu’à assurer une meilleure lisibilité du texte.
Enregistrer ce fichier sous le nom « test.html » (bien faire attention à l’extension). Une fois le fichier enregistré, faire un double-clic sur « test.html » pour l’ouvrir. Que remarque-t-on ?
Explications :
Les mots encadrés par des chevrons ( < et > ) sont des balises (ou tags). Il existe les balises ouvrantes (comme <body>) et les balises fermantes, qui commencent par un « slash » (comme </body>). Si on ouvre plusieurs balises, il faut les refermer dans l’ordre inverse de leur ouverture : <html> est la première balise à être ouverte, c’est donc la dernière à être fermée.
Les balise <html> et </html> indiquent au navigateur que tout ce qui se trouve entre ces deux balises doit être interprété comme une page web. Ces deux balises sont obligatoires.
A l’intérieur des balises <html>, il y a deux sections :
- La première, entre <head> et </head>, est appelée l’en-tête (ou header). Cette section contient notamment le titre de la page web qui s’affichera dans la barre de titre du navigateur (balises <title> et </title>).
- La seconde, entre <body> et </body>, est appelée le corps de la page web. C’est dans cette section que se trouve le contenu de la page (texte, images, etc…). Dans notre exemple, il s’agit d’une simple phrase.
Nous avons réalisé une page web, mais elle est très rudimentaire… Nous allons voir que grâce à d’autres balises, nous allons pouvoir étoffer cette page.
Mise en forme du document
Dans un traitement de textes, il existe de nombreuses façons de mettre un mot, ou un paragraphe en valeur : format de police (gras, souligné, italique, …), alignement de paragraphe, couleurs, … Nous allons voir que de nombreuses balises permettent d’obtenir ces effets dans une page web. Mais tout d’abord, un autre petit test. Modifier le fichier « test.html » de la façon suivante, et enregistrer le :
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> Ceci est mon premier essai J’essaie de rajouter une deuxième ligne </body> </html>
Ouvrir le fichier modifié dans le navigateur Internet (Le plus simple est de laisser l’éditeur de textes et le navigateur ouverts : dès que vous ferez une modification au fichier « test.html », enregistrez-le (CTRL S), puis retournez dans le navigateur pour rafraîchir la page (touche F5). Cela vous permettra de gagner beaucoup de temps). Que remarque-t-on ?
Pour remédier à ce problème, il existe une balise permettant de forcer le retour à la ligne. Il s’agit de la balise <br/>. C’est une balise un peu particulière, car elle ne fonctionne pas par paire. Comme toutes les balises « simples », son nom finit par un « slash ». Modifier le fichier « test.html » de la manière suivante. Que remarque-t-on ?
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> Ceci est mon premier essai <br/> J’essaie de rajouter une deuxième ligne </body> </html>
Une autre façon de régler le problème des retours à la ligne est de définir des paragraphes. Les paragraphes commencent par une balise <p> et finissent par une balise </p> :
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> <p>Dans ce premier paragraphe, je vais expliquer le premier point.</p> <p>Dans ce deuxième paragraphe, je vais donc, logiquement, expliquer le deuxième point.</p> </body> </html>
Essayer de rajouter d’autres paragraphes, de longueur plus importante, pour voir le résultat obtenu dans le navigateur.
Pour mettre en évidence chaque paragraphe, il est de bon ton de rajouter des titres. Pour cela il existe les balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6> (ainsi que leur équivalent avec « slash »). La balise <h1> correspond au titre le plus gros possible, la balise <h6> au titre le plus petit possible. Exemple :
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> <h1>Ma première page WEB</h1> <p>Comme nous allons le voir deux outils sont nécessaires pour fabriquer une page web : un éditeur de textes et un navigateur.</p> <h2>L’éditeur de textes</h2> <p>Nous allons utiliser Sublime Text,un éditeur de textes gratuit et performant.</p> <h2>Le navigateur Internet</h2> <p>Pour le navigateur, nous allons utiliser Mozilla Firefox, qui est un des navigateurs les plus utilisés en ce moment.</p> </body> </html>
Essayez d’autres balises de titre pour voir le résultat dans le navigateur.
Du texte peut être mis en gras (balises <b> et </b>), en italique (balises <i> et </i>), en souligné (balises <u> et </u>) ou en barré (balises <s> et </s>). Par exemple :
<html> <head> <title>Ma première page Web ;-)</title> </head> <body> <p><b>Ce texte est en gras</b></p> <p><i>Ce texte est en italique</i></p> <p><u>Ce texte est souligné</u></p> <p><s>Ce texte est barré</s></p> <p>Mais bien sûr, rien n’empêche de <b>mélanger</b> <u>les</u> <i>styles</i></p> </body> </html>
Nous pouvons maintenant faire des pages un peu plus attrayantes, mais elles restent monochromes : on écrit en noir sur fond blanc... Essayons d’introduire la couleur. Tout d’abord, nous pouvons changer la couleur du fond, en modifiant la balise <body>. Reprenez l’exemple précédent, en remplaçant <body> par <body bgcolor=yellow>. Que remarque-t-on ?
Plusieurs noms de couleurs sont reconnus par la quasi majorité des navigateurs : black, blue, green, red, white, yellow, gray, lime(vert clair), aqua(bleu clair), ... Mais en fait, vous avez accès à un peu plus de 16 millions de couleurs différentes : il suffit d’indiquer le code RVB (Rouge, Vert, Bleu) en hexadécimal, grâce à la balise <body bgcolor=#rrvvbb>, avec rr, vv, bbles quantités de rouge, vert et bleu en hexadécimal. Par exemple : si on veut du rouge, on met le rouge au maximum et le vert et le bleu au minimum : bgcolor=#FF0000. Si on veut du jaune (rouge + vert), on met le rouge et le vert au maximum, et le bleu au minimum : bgcolor=#FFFF00. Si on veut de l’orangé, on diminue la quantité de vert : bgcolor=#FF8000. Essayez avec d’autres combinaisons... Vous pourrez déterminer le code hexadécimal de n'importe quelle couleur en utilisant ce site : http://www.proftnj.com/RGB3.htm.
De la même façon, on peut changer la couleur du texte, grâce aux balises <font color= > et </font> . On peut utiliser indifféremment des noms en clair ou les codes hexadécimaux.
Voici un exemple :
<html> <head> <title>Ma première page Web avec des couleurs !!!</title> </head> <body bgcolor=black> <p><font color=blue>Ce texte est en bleu</font></p> <p><font color=green>Ce texte est en vert</font></p> <p><font color=red>Ce texte est en rouge</font></p> <p><font color=yellow>Ce texte est en jaune</font></p> <p><font color=aqua>Ce texte est en bleu clair</font></p> <p><font color=lime>Ce texte est en vert clair</font></p> <p><font color=gray>Ce texte est en gris</font></p> <p><font color=white>Ce texte est en blanc</font></p> </body> </html>
Une autre balise utile pour la mise en page, la balise <hr/>. Il s’agit d’une balise simple (donc son nom finit par « slash »), et elle insère une barre horizontale de démarcation. Essayez de l’utiliser dans la page précédente...
La puissance du HTML : les liens hypertextes
Nous allons maintenant créer un lien cliquable, ce qu’on appelle aussi « lien hypertexte » :
<html> <head> <title>Ma première page Web avec un lien</title> </head> <body> <h1>Bienvenue sur ma page Web</h1> Si tu veux aller sur Google, <a href="https://www.google.fr">clique ici !!!</a> </body> </html>
La balise permettant de faire un lien est <a>. La syntaxe est la suivante :
<a href="emplacement de la page" >Texte du lien</a>
Un lien peut être local, s’il pointe vers une page présente sur le disque dur (exemple href="test2.html"), ou global s’il pointe vers une page Internet (exemple : href="https://www.google.fr").
Intégrons des images
Pour mettre une image de fond, on modifie la balise « body » : <body background="emplacement de l’image"> (Attention à la lisibilité !)
Pour insérer une image dans le corps du document : <img src="emplacement de l’image">
(Si on encadre la balise <img> par des balises <a> et </a>, on peut associer l’image et un lien hypertexte.
Cette activité ne constitue qu'une toute petite initiation au langage HTML. Pour aller plus loin, vous pouvez consulter le site suivant : https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements
