Une douce introduction au HTML

Je suis sûr de pouvoir affirmer que HTML est le langage de balisage le plus largement utilisé à ce jour. Alors que d’autres langages de balisage existent, y compris nroff et groff, LaTeX et Markdown, aucun autre langage de balisage n’est aussi répandu que le langage de balisage hypertexte. 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 douce introduction à l’apprentissage du HTML. Je me concentre sur l’essentiel du HTML pour construire une compréhension de base du fonctionnement du HTML. Vous pouvez l’utiliser comme point de départ pour en savoir plus sur HTML.

Recueillir des mots pour remplir un paragraphe

Commençons par une compréhension de base de HTML et de la façon dont les applications clientes telles que les navigateurs Web affichent les documents HTML. À la base, HTML recueille 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 avec cet exemple de texte, enregistré dans un fichier texte brut appelé index.html. Ceci est un paragraphe de l’ancien Grille-pain du roi histoire, 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 façon dont vous obtenez le fichier dans le navigateur Web n’a pas vraiment d’importance. Mais vous devez nommer le fichier avec un .html extension, que les navigateurs Web reconnaissent par défaut comme un fichier HTML.

Dans ce cas, j’ai écrit le fichier sur des lignes séparées. 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 simplement comme un bloc par défaut. Vu sur un navigateur Web, ce fichier ressemble à ceci :

Éléments en ligne et en bloc

Au cœur de HTML se trouve le concept de en ligne et bloquer éléments. Vous pouvez considérer les éléments de bloc comme remplissant toujours un rectangle. Éléments en ligne suivre uniquement le texte en ligne.

L’élément de bloc de base est appelé le divisionet utilise le <div> étiquette. L’élément en ligne de base est le envergureavec le <span> étiquette. 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 uniquement par ces deux éléments pour comprendre leur fonctionnement.

Ajoute-en <div> et <span> balises à 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 <div> élément de bloc autour de tout le paragraphe, et un <span> autour d’une seule phrase. Remarquez que lorsque je démarre un élément HTML comme <div> ou <span>je dois fournir son correspondant fermeture étiqueter comme </div> et </span>. La plupart des éléments HTML sont formés comme ceci, 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 parce que <div> et <span> ne définissez pas vraiment de formatage spécial par eux-mêmes, vous ne pouvez pas voir que quelque chose a changé. Votre exemple de paragraphe ressemble au précédent :

Vous pouvez inclure style direct dans ces balises avec une instruction de style, afin que vous puissiez voir comment les éléments block et inline se comportent. Pour faire ressortir les limites de chaque élément, utilisons un fond bleu clair pour le <div> bloc 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 changements, le paragraphe entier a un fond bleu clair. La <div> L’élément de bloc 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 parce que <span> est un élément en ligne.

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, selon ce qu’ils sont. Par exemple, <p> est un élément de bloc qui a un espace supplémentaire au-dessus et au-dessous du bloc. Les balises de titre, <h1> à travers <h6>, sont également des éléments de bloc définis avec différentes tailles de police et styles de texte comme l’italique et le gras. La <strong> tag est un élément en ligne qui affiche du texte dans un audacieux lester. De la même manière, <em> est également un élément en ligne qui définit le texte dans un italique style.

Terminer une page HTML

Certains éléments HTML sont obligatoires. 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’un corriger Page HTML. Il y a quelques éléments que vous devez ajouter :

Chaque document HTML doit fournir une déclaration de type de document. Utiliser la balise unique <!DOCTYPE html> sur la première ligne du fichier HTML pour définir un document HTML. La norme HTML s’attend également à ce que vous enveloppiez le texte du document dans deux éléments de bloc : <html> pour définir la pleine page, 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 ont également besoin d’un <head> bloquer avant le <body> qui procure Méta-information à propos de la page. La seule méta-information requise est le titre du document, défini par le <title> élément:

<!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 comme <html>, <head>et <body> ne modifiez pas l’apparence de la page HTML dans un navigateur Web, mais elles sont requises pour un document HTML techniquement correct :

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