Recherche de site Web

Une introduction douce au HTML

Apprenez le langage de balisage du Web.

Je peux affirmer en toute confiance que HTML est le langage de balisage le plus utilisé à ce jour. Bien qu'il existe d'autres langages de balisage, notamment nroff et groff, LaTeX et Markdown, aucun autre langage de balisage n'est aussi répandu que l'Hyper Text Markup Language. HTML est le langage de facto du Web. Implémenté pour la première fois dans les navigateurs Web en 1994, le langage continue d'évoluer. Pourtant, les bases du HTML restent les mêmes.

Si vous débutez en HTML, je voulais vous proposer cette introduction douce à l'apprentissage du HTML. Je me concentre sur les bases du HTML pour acquérir une compréhension de base du fonctionnement du HTML. Vous pouvez l'utiliser comme point de départ pour en savoir plus sur le HTML.

Recueillir des mots pour remplir un paragraphe

Commençons par une compréhension de base du HTML et de la manière dont les applications clientes telles que les navigateurs Web affichent les documents HTML. À la base, HTML collecte les mots dans un fichier et remplit un paragraphe. Cela signifie que si vous n'ajoutez pas d'instructions (appelées balisage) à un fichier HTML et que vous le laissez simplement sous forme de texte brut, un navigateur Web transforme tout ce texte en un seul paragraphe.

Commencez par cet exemple de texte, enregistré dans un fichier texte brut appelé index.html. Ceci est un paragraphe de la vieille histoire du King's Toaster, une fable Internet sur la façon dont vous pourriez construire un grille-pain à partir d'un microcontrôleur :

The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

The program would use that darkness level as the index to
a 16-element table of initial timer values.

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."

Vous pouvez placer ce fichier sur un serveur Web et y accéder comme vous le feriez pour n'importe quel site Web, ou vous pouvez l'enregistrer sur votre disque local et l'ouvrir directement dans un navigateur Web. La manière dont vous obtenez le fichier dans le navigateur Web n'a pas vraiment d'importance. Mais vous devez nommer le fichier avec une extension .html, que les navigateurs Web reconnaissent par défaut comme un fichier HTML.

Dans ce cas, j'ai écrit le fichier sur des lignes distinctes. J'ai également ajouté quelques lignes vides pour démontrer que HTML ne se soucie pas des espaces blancs supplémentaires. Cet espace supplémentaire peut aider les humains à lire le code HTML, mais le navigateur Web le traite par défaut comme un seul bloc. Visualisé sur un navigateur web, ce fichier ressemble à ceci :

(Jim Hall, CC BY-SA 4.0)

Éléments en ligne et en bloc

Au cœur du HTML se trouve le concept d'éléments inline et block. Vous pouvez considérer les éléments de bloc comme remplissant toujours un rectangle. Les éléments en ligne suivent uniquement le texte en ligne.

L'élément de bloc de base s'appelle division et utilise la balise <div>. L'élément en ligne de base est le span, avec la balise <span>. La plupart des balises HTML sont une sorte d'élément de bloc ou d'élément en ligne, il est donc utile de commencer par ces deux éléments pour comprendre leur fonctionnement.

Ajoutez des balises <div> et <span> à votre document HTML pour voir à quoi ressemblent les éléments de bloc et en ligne :

<div>
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span>
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>

J'ai ajouté un élément de bloc <div> autour de tout le paragraphe et un <span> autour d'une seule phrase. Notez que lorsque je démarre un élément HTML comme <div> ou <span>, je dois fournir sa balise fermante correspondante comme

et . La plupart des éléments HTML sont formés ainsi, avec une balise d'ouverture et de fermeture.

Le navigateur Web utilise ces balises pour afficher le contenu HTML d'une certaine manière, mais comme <div> et <span> ne définissent pas vraiment de formatage spécial par eux-mêmes, on ne voit pas que quelque chose a changé. Votre exemple de paragraphe ressemble à avant :

(Jim Hall, CC BY-SA 4.0)

Vous pouvez inclure un style direct dans ces balises avec une instruction de style, afin de voir comment se comportent les éléments de bloc et en ligne. Pour faire ressortir les limites de chaque élément, utilisons un fond bleu clair pour le bloc <div> et un fond rose pour le <span> :

<div style="background-color:lightblue">
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>

Avec ces modifications, le paragraphe entier a un fond bleu clair. L'élément de bloc <div> est un rectangle, donc le bleu remplit même l'espace vide après la fin de la dernière phrase. Pendant ce temps, la deuxième phrase a un fond rose. Ce surlignage suit la phrase car <span> est un élément en ligne.

(Jim Hall, CC BY-SA 4.0)

La plupart des éléments HTML sont soit en bloc, soit en ligne. La seule différence est que ces autres éléments portent des styles par défaut, en fonction de leur nature. Par exemple, <p> est un élément de bloc qui dispose d'un espace supplémentaire au-dessus et en dessous du bloc. Les balises de titre, <h1> à <h6>, sont également des éléments de bloc définis dans différentes tailles de police et styles de texte comme l'italique et le gras. La balise <strong> est un élément en ligne qui affiche le texte en gras. De même, <em> est également un élément en ligne qui définit le texte dans un style italique.

Finir une page HTML

Certains éléments HTML sont requis. Bien que l'exemple de fichier HTML que vous avez utilisé s'affiche correctement sur n'importe quel navigateur Web, il ne s'agit pas techniquement d'une page HTML correcte. Il y a quelques éléments que vous devez ajouter :

Chaque document HTML doit fournir une déclaration de type de document. Utilisez la balise unique sur la première ligne du fichier HTML pour définir un document HTML. La norme HTML attend également que vous enveloppiez le texte du document dans deux éléments de bloc : <html> pour définir la page entière et <body> pour définir le corps du document.

<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightblue">
The engineer replied,
...
</div>
</body>
</html>

Les documents HTML nécessitent également un bloc <head> avant le <body> qui fournit des méta-informations sur la page. La seule méta-information obligatoire est le titre du document, défini par l'élément <title> :

<!DOCTYPE html>
<html>
<head>
<title>The King's Toaster</title>
</head>
<body>
<div style="background-color:lightblue">
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>
</body>
</html>

Les balises de support telles que <html>, <head> et <body> ne modifient pas la façon dont la page HTML apparaît dans un navigateur Web. mais ils sont obligatoires pour un document HTML techniquement correct :

(Jim Hall, CC BY-SA 4.0)

Cette introduction douce au HTML ne fournit que l'essentiel du HTML, mais maintenant que vous comprenez les éléments de bloc et en ligne, vous êtes sur la bonne voie pour apprendre à écrire des documents HTML à l'aide d'autres balises HTML.

Articles connexes: