mozilla

Revision 316457 of Introduction à HTML

  • Raccourci de la révision : HTML/Introduction
  • Titre de la révision : Introduction à HTML
  • ID de la révision : 316457
  • Créé :
  • Créateur : regisg27
  • Version actuelle ? Non
  • Commentaire HTML/introduction HTML/Introduction
Étiquettes : 

Contenu de la révision

HyperText Markup Language (HTML) (littéralement Language HyperTexte à balises) est un langage à balise utilisé pour la création de contenu et la structuration sémantique des pages web. Une page web est comprise de nombreux éléments HTML, chacun de ces éléments a un sens particulier dans le contexte de la page. Certains éléments se suffisent à eux-même, tandis que d'autres doivent être imbriqués pour créer une structure de plus en plus complexe pour votre contenu. Les navigateurs Web interprètent le HTML pour construire le contenu de la page, et ils interprètent le code HTML en relation avec le code CSS pour l'apparence du contenu.

Cet article sert d'introduction à HTML, et vous aidera à apprendre comment il fonctionne et comment structurer une page web basique. Si vous vous être déjà demander comment faire pour que lorsqu'on clique sur une partie d'une page web on arrive sur une autre, ou comment faire des listes à puces, cette article est l'endroit pour commencer votre apprentissage d'HTML.

Les éléments - la base d'une page web

L'unité de base d'information en HTML est communiqué par l'élément. Les éléments répondent à la question "De quelle information s'agit-il ?" et définit le sens sémantique de leur contenu. Certains éléments ont un sens très précis, comme "ceci est une image", "ceci est titre", ou "ceci est une liste ordonnée", tandis que d'autres sont beaucoup moins précis comme "ceci est une partie de la page" ou "ceci est un morceau de texte", et enfin certains ont juste une utilisé technique. Mais d'une façon ou d'une autre, il apporte tous une valeur sémantique.

La plupart des éléments peuvent contenir d'autres éléments, formant une hiérarchie de structure, un arbre, appelé le DOM, le Document Object Model (littéralement le Modèle d'objet document). Il y a un peu plus de 100 éléments définis en HTML.

Les balises

HTML utilise du texte simple comme fondation et porte une attention particulière à tout ce qui commence par le signe inférieur à (<) et ce qui fini par le signe supérieur à (>). Ce formatage particulier est appelé une balise (ou parfois aussi un tag). Voici un exemple :

<p>Ce texte est dans un paragraphe.</p>

Dans cet exemple, il y a une balise ouvrante et une balise fermante. Les balises fermantes portent le même nom que les balises ouvrantes, mais contiennent aussi un slash (/) immédiatement après le signe "inférieur à". La plupart des éléments HTML sont écrits avec un couple des balises ouvrantes et fermantes. Les balises ouvrantes et fermantes doivent toujours est correctement imbriquées, c'est à dire que les balises fermantes doivent toujours êtres écrites dans l'ordre inverse des balises d'ouverture. Une bonne imbrication des balises est une des règles à respectés afin d'avoir un code valide.

Voici un exemple de code valide :

<em>Ceci est <strong>très</strong> important</em>.

Voici un exemple de code non-valide :

Non-valide: <em>Ceci est <strong>très</em> important</strong>.

Avant l'arrivée des règles d'interprétation d'HTML5, les navigateurs n’interprétaient pas le code non-valide de la même façon et produisaient des résultats très différents quand ils étaient confrontés à un bout de code mal formaté. Les navigateurs étaient assez permissifs avec les créateurs de pages web, mais malheureusement pas tous de la même façon, amenant à des résultats quasiment imprévisible. De nos jours, avec les dernières évolutions des navigateurs, comme Internet Explorer 10, Firefox 15, Opera 12, Chrome 21 ou Safari 6, et leur règles interprétation standards du code non-valide, le résultat produite le même arbre DOM.

Certains éléments n'ont cependant pas de contenu textuel ou ne peuvent contenir d'autres éléments. Il s'agit des éléments vides. Il ne nécessite pas de balise de fermeture. Voici un exemple :

<meta charset="utf-8">

Certains auteurs préfèrent ajouter un slash (/) à la fin de l'élément vide, ce qui est obligatoire en XHTML. En HTML, ce slash n'a aucune utilité technique et n'est qu'une préférence stylistique.

<meta charset="utf-8" />

Les attributs

Une balise ouvrante peut contenir des informations additionnelles, comme sur l'exemple précédent. Cette information est appelé un attribut. Les attributs consistent en deux parties :

  • Un nom d'attribut
  • Une valeur d'attribut

Certains attributs peuvent n'avoir qu'une valeur. Il s'agit des attributs booléens et ils peuvent être réduit qu'à leur nom d'attribut ou n'avoir aucune valeur d'attribut. Ainsi les 3 exemples suivant ont le même sens :

<input required="required">

<input required="">

<input required>

Les valeurs d'attribut consistant à un seul mot ou un nombre peuvent écrit tel quel, mais dès qu'il y a deux ou plusieurs chaînes de caractères comme valeur, il doivent être écris avec des guillemets ("). Les guillemets simples (') ou les guillemets doubles (") peuvent être utilisés. De nombreux auteurs de pages web préfèrent toujours utilisé des guillemets afin de rendre le code moins ambigu, plus facile à lire et éviter les erreurs. Le code suivant est une erreur :

<p class=foo bar> (Attention, ceci ne veut sûrement pas dire ce que vous pensez.)

Dans cet exemple la valeur est censée être "foo bar", mais puisqu'il n'y a pas de guillemets, elle est interprétée comme si elle avait été écrite :

<p class="foo" bar="">

Named character references

Since the less than and greater than sign have special meaning one must (usually) use a named character reference, often casually named an entity, to mark up those signs in plain text. Entities may be written using names, decimal numbers or hexadecimal numbers. (More on that later.) There are four basic named entities one must know:

  • &gt; correspond au signe supérieur à " > ".
  • &lt; correspond au signe inférieur à " < ".
  • &amp; correspond au signe esperluette " & ".
  • &quot; correspond au signe double guillemets ' " '.

There are many more entities in the latest version of the standard, but these 4 are absolutely fundamental, since they represent characters that have a special meaning in HTML. Others are allowed to represent characters that are not part of the character set of the Web document.

Doctype et commentaires

En plus des balises, du contenu textuel et des entités, un document doit toujours contenir un doctype à son début. Une page HTML doit commencer par :

<!DOCTYPE html>

Le doctype a une histoire longue et compliqué, mais pour l'instant, vous avez besoin de savoir que c'est ce doctype qui dit au navigateur d’interpréter le code HTML et CSS selon et les standards et de pas comme s'il était une version d'Internet Explorer des années 90. (voir le mode quirks)

Pour aider à vous souvenir de ce que vous faisiez pendant que vous développiez, ou pour communiquer avec d'autres développeurs, votre code peut aussi contenir des commentaires. Les commentaires en HTML démarre avec le signe "inférieur à", suivi d'un point d'exclamation et deux signes moins (<!--). Il se termine par deux signes moins suivis d'un signe "supérieur à". (-->)

<!-- Ceci est un commentaire -->

Un document petit mais complet

Regroupons tout ceci en un tout petit exemple de document HTML. La structure du document et les éléments seront expliqués dans un article ultérieur. Allez-y, écrivez ce code dans un éditeur de texte, enregistrez-le avec le nom monpremierdoc.html et ouvrez-le dans un navigateur web. Faites bien attention que vous enregistrez avec l'encodage de caractères UTF-8. Ce document n'utilise aucun style de présentation, il sera donc un peu ennuyeux, mais ce n'est qu'un début !

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Un document minuscule</title>
</head>
<body>
  <h1>Titre principal de mon document</h1>
  <!-- Notez qu'il s'agit de "h" + "un", pas de "h" + la lettre "l" -->
  <p>Regarde maman, je suis en train de coder en <abbr title="Hyper Text Markup Language" lang="en">HTML</abbr> !</p>
</body>
</html>
l

Source de la révision

<p><strong>HyperText Markup Language</strong> (<a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a>) (littéralement <em>Language </em><em>HyperTexte </em><em>à balises</em>) est un langage à balise utilisé pour la création de contenu et la structuration sémantique des pages web. Une page web est comprise de nombreux éléments HTML, chacun de ces éléments a un sens particulier dans le contexte de la page. Certains éléments se suffisent à eux-même, tandis que d'autres doivent être imbriqués pour créer une structure de plus en plus complexe pour votre contenu. Les navigateurs Web interprètent le HTML pour construire le contenu de la page, et ils interprètent le code HTML en relation avec le code CSS pour l'apparence du contenu.</p>
<p>Cet article sert d'introduction à HTML, et vous aidera à apprendre comment il fonctionne et comment structurer une page web basique. Si vous vous être déjà demander comment faire pour que lorsqu'on clique sur une partie d'une page web on arrive sur une autre, ou comment faire des listes à puces, cette article est l'endroit pour commencer votre apprentissage d'HTML.</p>
<h2 id="Les_.C3.A9l.C3.A9ments_-_la_base_d'une_page_web">Les éléments - la base d'une page web</h2>
<p>L'unité de base d'information en HTML est communiqué par l'<strong>élément</strong>. Les éléments répondent à la question "De quelle information s'agit-il ?" et définit le sens <strong>sémantique</strong> de leur contenu. Certains éléments ont un sens très précis, comme "ceci est une image", "ceci est titre", ou "ceci est une liste ordonnée", tandis que d'autres sont beaucoup moins précis comme "ceci est une partie de la page" ou "ceci est un morceau de texte", et enfin certains ont juste une utilisé technique. Mais d'une façon ou d'une autre, il apporte tous une valeur sémantique.</p>
<p>La plupart des éléments peuvent contenir d'autres éléments, formant une hiérarchie de structure, un arbre, appelé le <strong>DOM</strong>, le <strong>Document Object Model </strong>(littéralement le <em>Modèle d'objet document</em>). Il y a un peu plus de 100 éléments définis en HTML.</p>
<h2 id="Les_balises">Les balises</h2>
<p>HTML utilise du texte simple comme fondation et porte une attention particulière à tout ce qui commence par le signe <em>inférieur à</em> (&lt;) et ce qui fini par le signe <em>supérieur à</em> (&gt;). Ce formatage particulier est appelé une <strong>balise</strong> (ou parfois aussi un <strong>tag</strong>). Voici un exemple :</p>
<pre class="brush: xml">
&lt;p&gt;Ce texte est dans un paragraphe.&lt;/p&gt;
</pre>
<p>Dans cet exemple, il y a une balise <em>ouvrante</em> et une balise <em>fermante</em>. Les balises fermantes portent le même nom que les balises ouvrantes, mais contiennent aussi un <em>slash</em> (/) immédiatement après le signe "inférieur à". La plupart des éléments HTML sont écrits avec un couple des balises ouvrantes et fermantes. Les balises ouvrantes et fermantes doivent toujours est correctement <strong>imbriquées</strong>, c'est à dire que les balises fermantes doivent toujours êtres écrites dans l'ordre inverse des balises d'ouverture. Une bonne imbrication des balises est une des règles à respectés afin d'avoir un code <strong>valide</strong>.</p>
<p>Voici un exemple de code <em>valide</em> :</p>
<pre class="brush: xml">
&lt;em&gt;Ceci est &lt;strong&gt;très&lt;/strong&gt; important&lt;/em&gt;.
</pre>
<p>Voici un exemple de code <em>non-valide</em> :</p>
<pre class="brush: xml">
Non-valide: &lt;em&gt;Ceci est &lt;strong&gt;très&lt;/em&gt; important&lt;/strong&gt;.</pre>
<p>Avant l'arrivée des règles d'interprétation d'HTML5, les navigateurs n’interprétaient pas le code non-valide de la même façon et produisaient des résultats très différents quand ils étaient confrontés à un bout de code mal formaté. Les navigateurs étaient assez permissifs avec les créateurs de pages web, mais malheureusement pas tous de la même façon, amenant à des résultats quasiment imprévisible. De nos jours, avec les dernières évolutions des navigateurs, comme Internet Explorer 10, Firefox 15, Opera 12, Chrome 21 ou Safari 6, et leur règles interprétation standards du code non-valide, le résultat produite le même arbre DOM.</p>
<p>Certains éléments n'ont cependant pas de contenu textuel ou ne peuvent contenir d'autres éléments. Il s'agit des éléments <strong>vides</strong>. Il ne nécessite pas de balise de fermeture. Voici un exemple :</p>
<pre class="brush: xml">
&lt;meta charset="utf-8"&gt;</pre>
<p>Certains auteurs préfèrent ajouter un slash (/) à la fin de l'élément vide, ce qui est obligatoire en XHTML. En HTML, ce slash n'a aucune utilité technique et n'est qu'une préférence stylistique.</p>
<pre class="brush: xml">
&lt;meta charset="utf-8" /&gt;</pre>
<h2 id="Les_attributs">Les attributs</h2>
<p>Une balise ouvrante peut contenir des informations additionnelles, comme sur l'exemple précédent. Cette information est appelé un <strong>attribut</strong>. Les attributs consistent en deux parties :</p>
<ul>
  <li>Un <strong>nom</strong> d'attribut</li>
  <li>Une <strong>valeur</strong> d'attribut</li>
</ul>
<p>Certains attributs peuvent n'avoir qu'une valeur. Il s'agit des attributs <strong>booléens</strong> et ils peuvent être réduit qu'à leur nom d'attribut ou n'avoir aucune valeur d'attribut. Ainsi les 3 exemples suivant ont le même sens :</p>
<pre class="brush: xml">
&lt;input required="required"&gt;

&lt;input required=""&gt;

&lt;input required&gt;
</pre>
<p>Les valeurs d'attribut consistant à un seul mot ou un nombre peuvent écrit tel quel, mais dès qu'il y a deux ou plusieurs chaînes de caractères comme valeur, il doivent être écris avec des guillemets ("). Les guillemets simples (') ou les guillemets doubles (") peuvent être utilisés. De nombreux auteurs de pages web préfèrent toujours utilisé des guillemets afin de rendre le code moins ambigu, plus facile à lire et éviter les erreurs. Le code suivant est une erreur :</p>
<pre class="brush: xml">
&lt;p class=foo bar&gt; (Attention, ceci ne veut sûrement pas dire ce que vous pensez.)</pre>
<p>Dans cet exemple la valeur est censée être "foo bar", mais puisqu'il n'y a pas de guillemets, elle est interprétée comme si elle avait été écrite :</p>
<pre class="brush: xml">
&lt;p class="foo" bar=""&gt;</pre>
<h2 id="Named_character_references">Named character references</h2>
<p>Since the less than and greater than sign have special meaning one must (usually) use a <strong>named character reference</strong>, often casually named an <em>entity</em>, to mark up those signs in plain text. Entities may be written using names, decimal numbers or hexadecimal numbers. (More on that later.) There are four basic named entities one must know:</p>
<ul>
  <li><code>&amp;gt;</code> correspond au signe <em>supérieur à</em> " <code>&gt;</code> ".</li>
  <li><code>&amp;lt;</code> correspond au signe <em>inférieur à</em> " <code>&lt;</code> ".</li>
  <li><code>&amp;amp;</code> correspond au signe <em>esperluette</em> " <code>&amp;</code> ".</li>
  <li><code>&amp;quot;</code> correspond au signe <em>double guillemets</em> ' " '.</li>
</ul>
<p>There are <a class="external" href="http://www.w3.org/TR/html5/named-character-references.html#named-character-references" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">many more entities</a> in the latest version of the standard, but these 4 are absolutely fundamental, since they represent characters that have a special meaning in HTML. Others are allowed to represent characters that are not part of the character set of the Web document.</p>
<h2 id="Doctype_et_commentaires">Doctype et commentaires</h2>
<p>En plus des balises, du contenu textuel et des entités, un document doit toujours contenir un <strong>doctype</strong> à son début. Une page HTML doit commencer par :</p>
<pre class="brush: xml">
&lt;!DOCTYPE html&gt;</pre>
<p>Le doctype a une histoire longue et compliqué, mais pour l'instant, vous avez besoin de savoir que c'est ce doctype qui dit au navigateur d’interpréter le code HTML et CSS selon et les standards et de pas comme s'il était une version d'Internet Explorer des années 90. (voir le mode quirks)</p>
<p>Pour aider à vous souvenir de ce que vous faisiez pendant que vous développiez, ou pour communiquer avec d'autres développeurs, votre code peut aussi contenir des <strong>commentaires</strong>. Les commentaires en HTML démarre avec le signe "inférieur à", suivi d'un point d'exclamation et deux signes moins (&lt;!--). Il se termine par deux signes moins suivis d'un signe "supérieur à". (--&gt;)</p>
<pre class="brush: xml">
&lt;!-- Ceci est un commentaire --&gt;</pre>
<h2 id="Un_document_petit_mais_complet">Un document petit mais complet</h2>
<p>Regroupons tout ceci en un tout petit exemple de document HTML. La structure du document et les éléments seront expliqués dans un article ultérieur. Allez-y, écrivez ce code dans un éditeur de texte, enregistrez-le avec le nom <em>monpremierdoc.html</em> et ouvrez-le dans un navigateur web. Faites bien attention que vous enregistrez avec l'encodage de caractères UTF-8. Ce document n'utilise aucun style de présentation, il sera donc un peu ennuyeux, mais ce n'est qu'un début !</p>
<pre class="brush: xml">
&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Un document minuscule&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Titre principal de mon document&lt;/h1&gt;
  &lt;!-- Notez qu'il s'agit de "h" + "un", pas de "h" + la lettre "l" --&gt;
  &lt;p&gt;Regarde maman, je suis en train de coder en &lt;abbr title="Hyper Text Markup Language" lang="en"&gt;HTML&lt;/abbr&gt; !&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
l</pre>
Revenir à cette révision