HTML est le “Hypertext Markup Langage”, donc un langage pour la rédaction de documents qui contiennent de l'Hypertext^[1]. Quand ce type de document est distribué via le protocole HTTP ( ou HTTPs ), le World Wide Web ( WWW ) est créé.

La même chose exprimée différemment : Chaque « page » affichée dans un navigateur Web, est du HTML, interprété par le navigateur.

D'autres types de contenu existent, mais en ce cas, nous ne devons pas parler de « pages Web » (PDF, images, son etc.)

La production de documents en HTML, donc de pages Web, est facile. Cependant, en enrichissant une telle page avec des éléments supplémentaires et en exigeant un formatage spécifique, nous pouvons la rendre plus compliquée.

Bien que ce document vous présente les bases de la rédaction en HTML, il vous permettra aussi la comparaison entre l'écriture de HTML et la génération de pages Web par des mécanismes automatisés, comme des CMS ou d'autres applications Web. Vous devez jauger l'effort de la rédaction et la pertinence des alternatives.

Vous allez pouvoir laisser cours à votre propre créativité le plus souvent possible.

Consultez aussi les pages qui sont listées tout en bas de cet article, dans les Références.

Généralités

Qu'est-ce que ça fait

En gros, HTML transmet au logiciel, qui affiche un document ( navigateur Web ), la volonté de l'auteur.

Exemple délibérément loufoque :

L'auteur d'une page détermine « que ce texte contient une partie qui commence ici, où les lettres sont en rouge et gras, que cette section s'arrête ici et que ce qui suit après le très-d'union sera aligné a droite : –

Voilà. Ce que j'ai dit »

Ne vous trompez pas. C'est aussi simple que ça. Si un document textuel peut profiter d'une formatage spécifique ou s'il faut organiser un texte et les informations qu'il doit colporter, le HTML a tout ce qui est nécessaire.

Jusque là, il n'y a pas de grandes différences entre les pages HTML et les fichiers qui sont produit avec un processeur de texte.

Hypertext

Hypertext est chaque document qui peut renvoyer le lecteur instantanément vers d'autres documents moyennant des hyperliens. Cette technique connecte tous les documents liés et ainsi crée un seul, énorme document, comme le constitue – par exemple – le World Wide Web.

La création de Hypertext a été un des objectifs des inventeurs de HTML.

Simplicité

HTML utilise des balises pour coder les attributs et instructions qui sont adressé non pas aux lecteurs, mais aux logiciels. De cette manière, il est facile de séparer un texte de la structure et des éléments de formatage. De plus, pour la rédaction d'une page HTML, n'importe quel éditeur de texte brute est suffisant. Il n'y a pas d'autres contraintes que celle de la syntaxe, imposés par la version^[2] du HTML que l'auteur a choisi.

Au même temps, les « langages de balisage »^[3], comme le HTML, permettent l'automatisation de la production de documents et aussi leur traitement et transformation par d'autres systèmes programmés que des navigateurs Web.

Écrire du HTML

Si vous n'avez jamais écris du HTML, Félicitations ! Un grand plaisir vous attend, si vous décidez de vous y mettre. Autant que vous ajoutez des connaissances à ceux que vous avez déjà pour avancer d'une étape à l'autre, vous allez pouvoir reconnaître que vos créations seront – au même temps – utiles et beau, et tout de suite !

Mais soyez avertis, qu'il existent beaucoup d'occasions pour faire fausse route !

Fausse route

J'ai entendu dire que.., il paraît que .., j'ai un copain ( qui connaît quelqu'un ...) et donc : JQuery .., Google .., Web-Fonts .., MySQL, DB2, Oracle, Tomcat, Adobe, CMS .., etc.. Etc.., etc.., et n'importe quoi.

Ne vous laissez pas impressionner par autre chose que votre propre expérience.

Ce chapitre est intitulé « Écrire du HTML » et ne veut pas parler de programmation. Écrire une page Web c'est de la rédaction ! Si vous croyez avoir besoin des « routines » ou de l'action, ceci n'est pas la documentation à consulter.

Projet exemplaire

Le texte suivant va servir comme objet de demonstration pour la suite ( faire défiler ):

Ping
Ping est un outil de diagnostic réseau. Il nous permet tout simplement

de vérifier qu'un ordinateur est à ce moment connecté au même réseaux, à qui nous avons accès nous-mêmes ( Internet notamment ).
de trouver l'adresse IP qui correspond au nom d'un ordinateur.
d'avoir une première idée de la qualité de la connexion entre nous et l'ordinateur en question.

Sommaire
1	Windows
2	Linux
3	macOS
4	Exemples
5	À voir aussi
6	Références
Windows
Linux
Le client pour ping est normalement installé avec le paquet “iputils”. Le fichier exécutable est donc /usr/bin/ping. Vous l'exécutez à tout moment dans une console : :~$ ping un_dimain.org ou :~$ ping 192.168.0.1.
La man-page : :~$ man ping

macOS
Exemples
:~$ ping www.google.com
PING www.google.com (142.250.179.68) 56(84) bytes of data.
64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=1 ttl=108 time=36.2 ms
64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=2 ttl=108 time=35.6 ms
(...)

Arrêtez le défilement des réponses avec Ctrl-C.

:~$ ping 185.204.160.202
PING 185.204.160.202 (185.204.160.202) 56(84) bytes of data.
64 bytes from 185.204.160.202: icmp_seq=1 ttl=51 time=38.0 ms
64 bytes from 185.204.160.202: icmp_seq=2 ttl=51 time=35.4 ms
64 bytes from 185.204.160.202: icmp_seq=3 ttl=51 time=41.1 ms
(...)

À voir aussi
Whois

C'est tout simplement la page Ping dans ce Wiki. Mais nous allons la transformer en une page Web dite « statique », qui peut exister en dehors de quelconque application Web ou autre contexte contraignant.

L'original du texte ( codé UTF-8 ) peut toujours être consulté ici : Fichier:Ping.txt

Le Choix du Dialecte

Il est moins important pour l'auteur d'une page que pour les logiciels qui lisent le HTML : sur chaque page une seule version de HTML est utilisé. Pour le moment, nous allons nous servir uniquement de HTML 5, ce qui correspond à peu près au standard le plus récent, mais c'est seulement pour démarrer notre « projet exemplaire ».

C'est simple.

Vous commencez en introduisant au dessus de la page, comme toute première ligne :

<!DOCTYPE html>

La page commence alors comme ça :

<!DOCTYPE html>

 Ping
 Ping est un outil de diagnostic réseau. Il nous permet tout simplement
   ( ... )

Bien évidemment, cette ligne – « La déclaration du type de document » ( anglais : “Doctype-Declaration” ) –, n'a pas de représentation sur la page qui sera affichée dans un navigateur Web.

Le Contenu

D'autres informations sont également destinées à être interprétés avant que la page devient visibles, par le navigateur ou d'autres logiciels. La plupart sont notés avant le vrai contenu. Ce n'est pas encore important ( et jamais très intéressant ).

Balises obligatoires

Mais d'abord, il faut marquer le début du « vrai contenu ». On pourrait croire, que le début est en haut, et la fin en bas de la page, et que c'est logique. Mais le HTML peut constituer seulement une partie d'un fichier qui contiendrait encore d'autres choses. Il faut donc permettre à un logiciel comme le navigateur de trouver le code qu'il doit interpreter :

<!DOCTYPE html>

<html>

 Ping
 Ping est un outil de diagnostic réseau. Il nous permet tout simplement
   ( ... )

</html>

<html> est la première balise sur la page, et la balise fermante </html> la toute dernière. Tout contenu se trouve donc entre ces deux balises. Vous pouvez, dès maintenant, imaginer une zone entre chaque balise et sa version fermante. Tout ce que fait la balise, a une influence sur cette zone. Nous ajouterons les balises la, où nous voulons manipuler une partie de notre texte.

Dans cet article, quand une balise est mentionnée en dehors des exemples de code, la notation <balise/> indique que la balise ouvrante et la balise fermante sont concernées ( <balise> et </balise> respectivement ).

La prochaine balise obligatoire est <body/>. La barre oblique indique, qu'il y a de nouveau la balise ouvrante <body> et aussi une balise fermante </body> :

<!DOCTYPE html>
<html>

 <body>  
    Ping
    Ping est un outil de diagnostic réseau. Il nous permet tout simplement
      ( ... )
 </body>

</html>

La troisième et dernière balise obligatoire sert à communiquer le titre de la page HTML aux logiciels. Ce titre est indépendant du contenu affiché de la page, il reste en dehors du corps du texte, donc en dehors de <body/> :

<!DOCTYPE html>
<html>

 <head>
    <title>Ping</title>
 </head>
 <body> 
    Ping
    Ping est un outil de diagnostic réseau. Il nous permet tout simplement
      ( ... )
 </body>

</html>

<title/> fait partie des éléments qui décrivent la page et la manière comment elle sera interprétée. Tout ces éléments s'accumulent dans la partie supérieur du code, et sont entourés de la balise <head/>. Nous allons voir d'autres balises de ce type, mais seul <title/> est obligatoire.

On dit d'ailleurs que <head/> est le « parent » de <title/>.

Aperçu

Ayant sauvegardé la page sous un nom comme « ping1.html » nous pouvons l'afficher dans un navigateur:

Page HTML avec seulement les balises obligatoires.

Il est évident qu'il manque encore beaucoup avant que ça va ressembler à un document qui vaut la publication. Mais même dans son état rudimentaire, ceci est du HTML valide.

Plus sur les balises

Les balises, utilisées jusqu'à ici, organisent la page HTML en une partie visible ( <body/> )et une partie invisible ( <head/> ). Leur hiérarchie est imposé par les règles du HTML et sera toujours la même :

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
  </body>
</html>

Vous allez voir que ceci ne vaut pas pour toutes les balises qu'on peut utiliser et qu'il y a des règles qui s'appliquent aux balises ou groupes des balises et les mettent en relation.

De plus, la plupart des balises^[4] peut être enrichi avec des attributs^[5] qui leur donnent des propriétés spécifiques. Comme exemple, vous imposez le corps du texte pour le document entier en modifiant la balise <body/> :

<!DOCTYPE html>
<html>

 <head>
    <title>Ping</title>
 </head>
 <body style="font-size:12pt;">
    Ping
    Ping est un outil de diagnostic réseau. Il nous permet tout simplement
      ( ... )
 </body>

</html>

HTML est une langue et vous permet de vous exprimer de plusieurs manières. Ainsi ils existent plusieurs manières de spécifier la taille d'une police.

Rendre le document lisible

Ayant fait ce qui est nécessaire, nous pouvons – enfin – nous défouler en jouant avec le HTML. Le but sera quand même de rendre le texte agréable à lire et, au même temps, de le structurer. Dès maintenat, il peut être avantageux, d'avoir accès à une documentation de référence, soit en papier, soit sur le Web^[6]. Si vous cherchez une balise ou un exemple – et bien que votre propre œuvre ne le réproduira pas à 100% –, vous gagnez du temps et n'avez pas à faire de nombreux essays.

balises pour la structure

Il va falloir définir les paragraphes du texte. Comme il contient déjà des intitulés, on va augmenter leur visibilité au même temps.

Les paragraphes et les intitulés représentent des « blocs » de texte et il y a tout un groupe de balises, qui sont prévus pour la création de ces blocs; nous avons le choix :

<p/>: Le paragraphe par défaut. Un navigateur va séparer les passages marquées par cette balise.
<div/>: Un bloc de texte « générique ». La séparation des autres blocs est seulement logique, jusqu'au moment que nous lui donnent un rôle et un formatage spécifique.
<ol/> et <ul/>: Des listes numérotés ou non.
<dl/>: Listes de définitions, comme celle-ci que vous lisez à ce moment.
<pre/>: Un bloc de texte pré-formaté. Cette balise sert à afficher des contenus d'origine divers dont le formatage ne vient pas du code HTML et n'est pas modifié par le navigateur.
<table/>: Pour définir des tableaux. Gare ! Un tableau n'est pas bon à tout. Ce n'est pas la solution parfait pour tous vos problèmes d'organisation d'une page Web. C'est dit, nous n'y reviendrons pas.
<br/>: Cette balise est autosuffisante et n'a pas besoin d'une balise fermante. Elle introduit un saut de ligne là, où elle est noté dans le texte. Le slash '/' assure que la balise est valide dans plusieurs versions récentes de HTML. Notez donc toujours : <br/>
d'autres: Trouvez plus de ces balises dans un document de référence (voir en bas).

Pour les intitulés des chapitres et le titre global d'une page:

<h1/>: Le titre d'une page. Rien ne vous empêche de l'utiliser plus d'une fois sur la même page mais ce serait de mauvais style.
<h2/>, <h3/> ...: Des intitulés pour les passages de votre document qui le méritent. Comme le navigateur va adapter le formatage de ces balises selon leur position dans la hiérarchie, ils sont de forts outils pour structurer le document.

Une proposition pour le formatage de notre page HTML ( ping.html ) en employant uniquement des balises de bloc :

<!DOCTYPE html>
<html>
<head>
  <title>Ping</title>
</head>
<body>
  <h1>Ping</h1>
  <p>Ping est un outil de diagnostic réseau. Il nous permet tout
  simplement de vérifier</p>
  <ul>
    <li>qu'un ordinateur est à ce moment connecté au même réseaux,
    qui nous avons accès nous-mêmes ( Internet notamment ),</li>
    <li>de trouver l'adresse IP qui correspond au nom d'un
    ordinateur,</li>
    <li>d'avoir une première idée de la qualité de la connexion
    entre nous et l'ordinateur en question.</li>
  </ul>
  <div>
    <h2>Sommaire</h2>
    <ol>
      <li>Windows</li>
      <li>Linux</li>
      <li>macOS</li>
      <li>Exemples</li>
      <li>À voir aussi</li>
      <li>Références</li>
    </ol>
  </div>
  <h2>Windows</h2>
  <h2>Linux</h2>
  <p>Le client pour ping est normalement installé avec le paquet
  “iputils”. Le fichier exécutable est donc /usr/bin/ping. Vous
  l'exécutez à tout moment dans une console : :~$ ping
  un_domain.org ou :~$ ping 192.168.0.1.</p>
  <h3>La man-page :</h3>
  <p>:~$ man ping</p>
  <h2>macOS</h2>
  <h2>Exemples :</h2>
  <pre>:~$  ping www.google.com 
  PING www.google.com (142.250.179.68) 56(84) bytes of data. 
  64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=1 ttl=108 time=36.2 ms 
  64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=2 ttl=108 time=35.6 ms(...)</pre>
  <p>Arrêtez le défilement des réponses avec Ctrl-C.</p>
  <pre>:~$ ping 185.204.160.202
  PING 185.204.160.202 (185.204.160.202) 56(84) bytes of data. 
  64 bytes from 185.204.160.202: icmp_seq=1 ttl=51 time=38.0 ms 
  64 bytes from 185.204.160.202: icmp_seq=2 ttl=51 time=35.4 ms 
  64 bytes from 185.204.160.202: icmp_seq=3 ttl=51 time=41.1 ms (...)
  </pre>
  <h2>À voir aussi</h2>
  <ul>
    <li>Whois</li>
  </ul>
</body>
</html>

Et voici une copie d'écran qui montre le début de la même page dans un navigateur Web ( comparez avec la première version en haut ):

Balises sémantiques

Nous avons définis les paragraphes et leur hiérarchie. Maintenant il faut encore améliorer la lisibilité sur le niveau des phrases et des mots, et – éventuellement – ajouter des éléments supplémentaires.

Il s'agit d'attribuer des rôles ou des tâches aux mots. Commençons dans la toute première phrase « Ping est un outil de diagnostic réseau. »

L'expression « outil de diagnostic réseau » doit être perçu dans son intégralité, mais si la personne qui lit notre page n'en a jamais entendu parler, elle va d'abord voir quatre mots. Nous allons formater cette expression pour en créer une unité.

Ce qui est peut-être important de clarifier : les balises que nous utilisons maintenant, ne servent pas aux effets optiques. Un logiciel peut réagir à notre choix d'une formatage, sans la « voir ». Et des personnes aveugles peuvent – effectivement – en profiter pour mieux comprendre un texte, si la bonne balise est utilisée.

Remarque importante : Selon l'auteur d'un article sur le HTML, les balises sont classés parfois différemment. Vu que la balise <p/> attribue au texte inclus le rôle d'un paragraphe et la balise <h2/> le rôle d'un intitulé, ils sont parfois listés dans les « balises sémantiques de structure »^[7]. On peut aller loin dans ce jeu. Ne vous opposez pas, mais sachez, que même « le standard » du HTML est maintenant appelé « vivant », c'est à dire en évolution continuelle ... Ouais. Bonne chance.

Une liste assez réduite de ses balises, dites sémantiques, va nous suffire, maintenant :

<em/>: « emphase » ( anglais : “emphasis” ) sert à marquer une passage de texte comme signifiant dans un contexte précis. Pensez : moyennement important ou remarquable.
<strong/>: « fort » ou « dure » sert à marquer une passage de texte comme tout simplement important.
<code/>: Sert à marquer une passage de texte comme code en Informatique.

Comme ces trois balises ne créent pas des blocs de texte mais formatent les mots à l'intérieur d'un block, ils sont appelés « balises en-ligne » ( anglais : “inline-tags ” ).

Revenons à notre tâche. « Ping est un outil de diagnostic réseau » sera enrichi d'une balise pour focaliser l'attention sur l'expression « outil de diagnostic réseau » :

<p>Ping est un <em>outil de diagnostic réseau</em>.</p>

ce qui donne dans un navigateur Web : Ping est un outil de diagnostic réseau

Ou en changeant le contexte de la phrase un peu :

<p>Ping n'est pas une manière de maintenir votre connexion active, mais un <strong>outil de diagnostic réseau</strong> !</p>

devient : Ping n'est pas une manière de maintenir votre connexion active, mais un outil de diagnostic réseau !

Ce qui intéresse ici n'est pas ( encore ) comment le navigateur va afficher le texte, mais que le passage concerné devient tout simplement identifiable. Sans cette contrainte, il y'aurait d'autres balises qui produisent le même résultat dans un navigateur Web, mais qui n'ont pas d'autres vertus et étaient dans le passé disqualifiés comme des frugales « balises de présentation » : <b/> ( gras, angl.: “bold”), <i/> ( italic, angl.: “italic” ), <u/> ( souligné, angl.: “underlined” ).
Étonnamment, ces balises ont été réhabilités avec la version 5 de HTML ... moyennant d'une argumentation plus ésotérique que évidente. Mais si vous avez senti la pointe de cet article, vous savez déjà que vous ne serez pas punis pour vos choix de balises mais plutôt salués pour votre soif d'expérimentation ( Ω quoi ! ).

Hyperliens

Il y a plusieurs expressions dans notre texte exemplaire, qui peuvent servir comme portes de passage entre notre document et d'autres, placés ailleurs dans le World Wide Web. Nous allons les transformer en Hyperliens, avec la balise
<a/> ( angl.: “anchor”).

Cette balise a la désagréable particularité que – dans le passé – elle est arrivée en deux saveurs : comme déclencheur des liens et comme cible de liens. Vous pouvez vous contenter de la comprendre comme marqueur pour le texte qui nous catapulte ailleurs. Voici les détails:

<p>Ping est un <a href="https://www.pcastuces.com/pratique/windows/outils_reseau/page1.htm">outil de diagnostic réseau</a>

crée un hyperlien dans le navigateur Web:
Ping est un outil de diagnostic réseau

Sans plus d'intervention de notre part, le lien sera coloré d'une manière standardisée et donc reconnaissable comme « élément actif ».

Le seul attribut obligatoire d'une balise <a/> est href. « ref » vient de “reference” et la valeur de l'attribut est donc la cible du lien ( toujours "entre guillemets" ). Le contenu entouré de <a/> devient l'étiquette du lien, la zone qui devient sensible au clique avec la souris.

Un deuxième type de lien concerne des sauts à travers du même document; le sommaire en haut de cette page et celui dans notre page exemplaire en contiennent des représentants :

 <div>
    <h2>Sommaire</h2>
    <ol>
      <li><a href="#win">Windows</a></li>
      <li><a href="#lin">Linux</a></li>
      <li><a href="#mac">macOS</a></li>
      <li><a href="#expl">Exemples</a></li>
      <li><a href="#avoir">À voir aussi</a></li>
    </ol>
  </div>

Le dièse au début de la référence est le détail important. À la place d'un URL ( comme dans l'exemple plus haut ) on note ici une valeur unique qui identifie la cible. Ces identifiants sont choisi délibéremment selon la seule règle, que la même valeur ne peut pas être attribué à plus d'un seul élément sur une page HTML. Regardons une des cibles, par exemple la paragraphe intitulée « Linux » :

<h2 id="lin">Linux</h2>
  <p>Le client pour ping est normalement installé avec le paquet
  “iputils”. Le fichier exécutable est donc /usr/bin/ping. Vous
  l'exécutez à tout moment dans une console :<br/>
  <code>:~$ ping un_domain.org</code> ou </code>:~$ ping 192.168.0.1</code></p>
  <h3>La man-page :</h3>
  <p>:~$ man ping</p>

L'élément qui porte l'identifiant ( le “id” ) « lin » est donc l'intitulé. id est un des attributs qui sont commun à toutes les balises. Vous pouvez donc marquer quelconque partie de votre page HTML avec un « id » pour pouvoir y diriger le lecteur plus tard, moyennant d'un hyperlien ailleurs, même à partir d'une autre page : en ce cas, la cible du lien ( le URL de notre page « ping.html » ) est étendu par la valeur de l'attribut « id » de la cible.

Exemple :

À voir aussi : <a href="ping.html#lin">l'outil ping sous Linux</a>, dans l'article <a href="ping.html"><i>Ping</i></a>

Ce qui donnera quelque chose comme :

À voir aussi : l'outil Ping sous Linux, dans l'article Ping

Le résultat en pure HTML

Avec les références an bas de cet article, vous pouvez vous occuper pendant un bon moment et essayer de diverses variations de formatage. Voici une proposition d'une page entière, seulement enrichie des balises dont a parlé cet article jusque là :

<!DOCTYPE html>
<html>
<head>
  <meta name="generator" content=
  "HTML Tidy for HTML5 for Linux version 5.6.0">
  <title>Ping</title>
</head>
<body>
  <h1>Ping</h1>
  <p>Ping est un <em>outil de diagnostic réseau</em>. Il nous
  permet tout simplement de vérifier</p>
  <ul>
    <li>qu'un ordinateur est à ce moment connecté au même réseaux,
    qui nous avons accès nous-mêmes ( Internet notamment ),</li>
    <li>de trouver l'adresse IP qui correspond au nom d'un
    ordinateur,</li>
    <li>d'avoir une première idée de la qualité de la connexion
    entre nous et l'ordinateur en question.</li>
  </ul>
  <div>
    <h2>Sommaire</h2>
    <ol>
      <li>
        <a href="#win">Windows</a>
      </li>
      <li>
        <a href="#lin">Linux</a>
      </li>
      <li>
        <a href="#mac">macOS</a>
      </li>
      <li>
        <a href="#expl">Exemples</a>
      </li>
      <li>
        <a href="#avoir">À voir aussi</a>
      </li>
    </ol>
  </div>
  <h2 id="win">Windows</h2>
  <p>Informations manquantes</p>
  <h2 id="lin">Linux</h2>
  <p>Le client pour ping est normalement installé avec le paquet «
  iputils » ( alternativement avec <a href="https://www.gnu.org/software/inetutils/">Gnu Inetutils</a> ). Le fichier exécutable est donc <em>/usr/bin/ping</em>.
  Vous l'exécutez à tout moment dans une console :</p>
  <div>
    <code>:~$ ping un_domain.org</code><br>
    ou <code>:~$ ping 192.168.0.1</code>.
  </div>
  <h3>La man-page :</h3>
  <p><code>:~$ man ping</code></p>
  <h2 id="mac">macOS</h2>
  <p>Informations manquantes</p>
  <h2 id="expl">Exemples :</h2>
  <pre>:~$  ping www.google.com 
  PING www.google.com (142.250.179.68) 56(84) bytes of data. 
  64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=1 ttl=108 time=36.2 ms 
  64 bytes from par21s19-in-f4.1e100.net (142.250.179.68): icmp_seq=2 ttl=108 time=35.6 ms(...)

Arrêtez le défilement des réponses avec Ctrl-C.

:~$ ping 185.204.160.202
  PING 185.204.160.202 (185.204.160.202) 56(84) bytes of data. 
  64 bytes from 185.204.160.202: icmp_seq=1 ttl=51 time=38.0 ms 
  64 bytes from 185.204.160.202: icmp_seq=2 ttl=51 time=35.4 ms 
  64 bytes from 185.204.160.202: icmp_seq=3 ttl=51 time=41.1 ms (...)
  
  <h2 id="avoir">À voir aussi</h2>
  <ul>
	  <li><a href="https://wiki.infini.fr/index.php/Whois">Whois</a></li>
  </ul>
</body>
</html>

Pour l'afficher, sauvegardez la page sous un nom comme « ping.html » et ouvrez la dans un navigateur Web.

La Suite

La page HTML crée ici ressemble à celles qui étaient fréquentes dans le World Wide Web, encore dans les années 1990. La couleur du font a souvent – en fonction du navigateur – été d'un gris claire assez ennuyeux. En Allemagne, on a commencé d'appeler des sites Web qui ne contenaient que ce type de pages des « déserts de plomb ».

Aujourd'hui, il y a une technique pour améliorer la présentation des pages Web : “Cascading Style Sheets” (CSS). La traduction de cette expression en « feuilles de style en cascade » n'est pas mieux. En attendant un article qui explique le CSS dans ce Wiki, vous pouvez consulter les tutoriels sur Mozilla.org.

A Voir aussi

HTML Tidy – un outil génial pour assurer que votre code HTML est conforme au standard choisi.
Cascading Style Sheets / CSS – le langage pour décrire la présentation des pages HTML ( et autres ).

Références

↑ Une introduction à l'Hypertexte : https://bbf.enssib.fr/consulter/bbf-1991-04-0280-002
↑ Une liste ( incomplète ) des standards du HTML dans Wikipedia : https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Documents_officiels
↑ Langage de balisage dans Wikipedia : https://fr.wikipedia.org/wiki/Langage_de_balisage
↑ Liste complet des balises dans HTML5 : https://jaetheme.com/balises-html5/
↑ Sematique des balises et attributs en HTML : https://www.apprendre-html-et-css.com/sementique_balises_et_attributs.html
↑ Wikibooks (référence complet) : https://fr.wikibooks.org/wiki/Le_langage_HTML
Une suite d'articles sur Mozilla.org : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web
↑ Par exemple sur cette page qui explique plus que vous voulez savoir sur les balises sémantiques : https://fr.semrush.com/blog/balises-structurelles-html-semantique/#que-sont-les-balises-s%C3%A9mantiques-html

[1] Une introduction à l'Hypertexte : https://bbf.enssib.fr/consulter/bbf-1991-04-0280-002

[2] Une liste ( incomplète ) des standards du HTML dans Wikipedia : https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Documents_officiels

[3] Langage de balisage dans Wikipedia : https://fr.wikipedia.org/wiki/Langage_de_balisage

[4] Liste complet des balises dans HTML5 : https://jaetheme.com/balises-html5/

[5] Sematique des balises et attributs en HTML : https://www.apprendre-html-et-css.com/sementique_balises_et_attributs.html

[6] Wikibooks (référence complet) : https://fr.wikibooks.org/wiki/Le_langage_HTML
Une suite d'articles sur Mozilla.org : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web

[7] Par exemple sur cette page qui explique plus que vous voulez savoir sur les balises sémantiques : https://fr.semrush.com/blog/balises-structurelles-html-semantique/#que-sont-les-balises-s%C3%A9mantiques-html

[1]

[2]

[3]

[4]

[5]

[6]

[7]