Tutoriel HTML pour débutants en 30 minutes

Objectif de cet article

En 30 minutes, vous comprendrez ce qu’est HTML et en aurez une compréhension de base. Une fois que vous aurez commencé, vous pourrez trouver en ligne des ressources plus détaillées pour continuer à apprendre.

Qu’est-ce que HTML

HTML est l’abréviation de l’expression anglaise Hyper Text Mark-up Language (langage de balisage hypertexte). Il définit ses propres règles de syntaxe pour exprimer des significations plus riches que le « texte », comme des images, des tableaux, des liens, etc. Les navigateurs (IE, FireFox, etc.) comprennent la syntaxe du langage HTML et peuvent être utilisés pour consulter des documents HTML. Actuellement, la grande majorité des pages web sur Internet sont écrites en HTML.

À quoi ressemble HTML

En termes simples, la syntaxe de HTML consiste à ajouter au texte desbalises(Tag) indiquant le sens, permettant aux utilisateurs (personnes ou programmes) de mieux comprendre le texte.

Voici le document HTML le plus simple :

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">Example</a>！
   </body>
</html>

Tous les documents HTML doivent avoir une balise <html>. La balise <html> peut contenir deux parties : <head> et <body>.

La balise <head> sert à contenir des informations générales sur l’ensemble du document, comme le titre du document (la balise <title> sert à contenir le titre), une description de l’ensemble du document, les mots-clés du document, etc. Le contenu spécifique du document doit être placé dans la balise <body>.

La balise <a> est utilisée pour représenter un lien. Lorsqu'on affiche un document HTML dans un navigateur (comme IE, Firefox, etc.), cliquer sur le contenu entouré par la balise <a> renvoie généralement vers une autre page. L'adresse de la page vers laquelle naviguer est spécifiée par l'attribut href de la balise <a>. Dans <a href="../www.example.com/index.html"> ci-dessus, la valeur de l'attribut href est http://www.example.com/.

Ce qu'un document HTML peut contenir

Grâce à différentes balises, un document HTML peut contenir différents contenus, tels que du texte, des liens, des images, des listes, des tableaux, des formulaires, des cadres, etc.

Texte: HTML offre le support le plus riche pour le texte. Vous pouvez définir des titres de différents niveaux, des paragraphes et des sauts de ligne, spécifier la sémantique et l'apparence du texte, indiquer qu'un texte est cité d'ailleurs, etc.
Liens: Les liens servent à indiquer qu'un contenu est lié à une autre page ou à un certain endroit de la page actuelle.
Images: Les images servent à rendre la page plus attrayante ou à fournir plus d'informations.
Listes: Les listes servent à indiquer qu'une série d'éléments sont liés les uns aux autres.
Tableaux: Un tableau est une forme d'organisation des données en lignes et en colonnes. Beaucoup de gens utilisent aussi les tableaux pour la mise en page.
Formulaires: Les formulaires se composent généralement de champs de saisie de texte, de boutons, de cases à cocher, de boutons radio, de listes déroulantes, etc., ce qui rend les pages HTML plus interactives.
Cadres: Les cadres permettent à une page de contenir d'autres pages.

Explication détaillée du format d'un document HTML

Le format de base des documents HTML a été présenté plus haut ; une explication détaillée est donnée ci-dessous.

Les documents HTML peuvent être créés et modifiés avec n'importe quel éditeur de texte (tel que Notepad, UltraEdit, etc.), car leur contenu n'est essentiellement que du texte.

Dans un texte HTML, les parties comprises entre chevrons sont appelées balises. Si vous souhaitez utiliser des chevrons (ou des signes supérieur et inférieur, bref la même chose) dans le corps du texte, vous devez utiliserl'échappement des caractères, c'est-à-dire convertir le sens originel des caractères. < doit utiliser<à la place, et > doit utiliser>, et quant au symbole & lui-même, il doit utiliser&à la place. (Il faut dire que de nombreux documents HTML ne suivent pas cette règle, et les navigateurs courants peuvent toujours déterminer si & est le début d'un échappement ou un symbole, mais ce n'est pas recommandé.)

Les balises sont essentiellement des descriptions du contenu qu'elles contiennent, et peuvent avoir des attributs pour fournir davantage d'informations. Par exemple, la balise <img> (image) possède un attribut src (utilisé pour spécifier l'adresse de l'image), ainsi que des attributs width et height (utilisés pour spécifier la largeur et la hauteur de l'image). Quelles balises peuvent être utilisées en HTML et quels attributs chaque balise peut avoir, tout cela est spécifié. Une fois que vous connaissez les bases décrites ici, apprendre le HTML revient en fait à apprendre ces balises. Plus loin dans cet article, une brève introduction aux balises HTML courantes sera donnée.

Les balises ont généralement une partie de début et une partie de fin (aussi appelées balise de début et balise de fin), qui définissent ensemble le contenu que contient la balise. Les attributs ne peuvent être spécifiés que dans la balise de début, et les valeurs d'attribut peuvent être placées entre guillemets simples ou doubles. Les balises de fin sont toutes représentées par / suivi du nom de la balise. Parfois, certaines balises ne contiennent pas d'autre contenu (elles ont uniquement leurs propres attributs, voire aucun attribut du tout). Dans ce cas, on peut l'écrire comme ceci : <img src="logo.gif.html" />. Notez l'espace final et la barre oblique ; cela indique que cette balise est terminée et qu'aucune balise de fin distincte n'est nécessaire.

Certaines balises peuvent contenir de nouvelles balises dans leur contenu, et le nom de la nouvelle balise peut même être identique au nom de la balise qui la contient (quelles balises peuvent contenir des balises, et quelles balises elles peuvent contenir, sont également spécifiées). Par exemple :

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

Dans ce cas, la dernière balise qui apparaît doit se terminer en premier.

Tous les caractères d'espacement dans les documents HTML (espaces, tabulations, sauts de ligne, retours chariot) sont ignorés par le navigateur. La seule exception est l'espace ; la façon dont les espaces sont traités est que tous les espaces consécutifs sont traités comme un seul espace, qu'il y en ait un, deux ou 100. La raison de cette règle est que le fait d'ignorer les espaces permet aux auteurs HTML d'organiser le contenu dans le format qui leur convient le mieux, par exemple en ajoutant une indentation après le début de chaque balise et en réduisant l'indentation après la fin d'une balise. Comme les espaces sont couramment utilisés dans le texte anglais (pour séparer les mots), ce traitement spécial est appliqué aux espaces. Si vous voulez afficher des espaces consécutifs (par exemple, pour l'indentation), vous devez utiliser pour représenter des espaces.

Introduction aux balises courantes

Texte

La balise la plus couramment utilisée est peut-être <font>, qui sert à modifier la police, la taille de police et la couleur du texte.

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

Le gras, le souligné et l'italique sont aussi des effets de texte courants, représentés respectivement par <b>, <u> et <i> :

<b>Bold</b>
<i>italic</i>
<u>underline</u>

Il existe également certaines balises utilisées pour indiquer que le texte contenu a une signification particulière, telles que <abbr> (abréviation), <em> (mise en valeur), <strong> (mise en valeur plus forte), <cite> (citation), <address> (adresse), etc. Ces balises n'existent pas pour définir des effets d'affichage ; elles peuvent donc n'avoir aucun effet visible dans les navigateurs, ou différents navigateurs peuvent afficher ces balises de manières complètement différentes.

Pour un article très long, s'il y a des sous-titres appropriés, vous pouvez rapidement obtenir une compréhension générale de son contenu. En HTML, les balises utilisées pour représenter les titres sont : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, qui représentent le titre de niveau 1, le titre de niveau 2, le titre de niveau 3, etc.

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

Images

La balise <hr> est utilisée pour ajouter une ligne horizontale à la page. Vous pouvez contrôler la longueur et la couleur de la ligne horizontale en spécifiant les attributs width et color.

<hr width="90%" color="red" />

La balise <img> est utilisée pour ajouter une image à la page. L'attribut src spécifie l'adresse de l'image. Si l'image spécifiée par src ne peut pas être ouverte, le navigateur affiche généralement le texte défini par l'attribut alt à l'endroit où l'image doit être affichée.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

Liens

Les hyperliens sont représentés par la balise <a>, et l'attribut href spécifie l'adresse vers laquelle créer le lien. La balise <a> peut contenir du texte ou des images.

<a href="../index.html">Example</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

Paragraphes et sauts de ligne

Comme les documents HTML ignorent les espaces blancs, pour garantir une mise en paragraphes et des retours à la ligne normaux, vous devez indiquer quel texte appartient au même paragraphe ; c'est là que la balise <p> est utilisée.

<p>这是第一段。</p>
<p>这是第二段。</p>

Certaines personnes n'utilisent pas <p> mais utilisent <br>. <br> représente uniquement un retour à la ligne, et non le début ou la fin d'un paragraphe, il n'a donc généralement pas de balise de fermeture.

这是第一段。<br>
这是第二段。<br />
这是第三段。

Parfois, un document doit être considéré comme une combinaison de différentes parties. Par exemple, une page typique peut inclure trois parties : en-tête, corps et pied de page. La balise <div> est spécifiquement utilisée pour marquer différentes sections :

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

Tableaux

Les documents HTML sont généralement affichés de gauche à droite et de haut en bas dans un navigateur, et passent automatiquement à la ligne lorsqu'ils atteignent le bord droit de la fenêtre. Afin d'obtenir un effet multi-colonnes, beaucoup de personnes utilisent des tableaux (<table>) pour la mise en page (bien que le but initial des tableaux en HTML n'était pas la mise en page).

La balise <table> contient généralement plusieurs balises <tr>, où <tr> représente une ligne du tableau. Les balises <tr> contiennent à leur tour des balises <td>, chaque <td> représentant une cellule.

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

Les balises <tr> peuvent également être contenues par <thead>, <tbody> ou <tfoot> dans <table>. Ils représentent respectivement l'en-tête, le corps et le pied du tableau. Lors de l'impression d'une page web, si le tableau est trop grand pour tenir sur une seule page, <thead> et <tfoot> apparaîtront sur chaque page.

<th> est très similaire à <td> et s'utilise aussi à l'intérieur de <tr> ; la différence est que <th> indique que cette cellule est le titre de sa ligne ou de sa colonne.

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

Listes

Les tableaux servent à représenter des données bidimensionnelles (lignes, colonnes), tandis que les données unidimensionnelles sont représentées par des listes. Les listes peuvent être divisées en listes non ordonnées (<ul>), listes ordonnées (<ol>) et listes de définitions (<dl>). Les deux premiers types de listes sont plus courants, et tous deux utilisent la balise <li> pour contenir les éléments de liste.

Une liste non ordonnée représente une série d'éléments similaires sans ordre particulier entre eux.

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

Dans une liste ordonnée, l'ordre entre les éléments est important ; les navigateurs génèrent généralement automatiquement des numéros pour eux.

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

Cadres

Enfin, parlons des cadres, une technologie qui a été autrefois très populaire. Les cadres permettent à une seule fenêtre d'afficher plusieurs documents simultanément. La page principale de jeu de cadres n'a pas de balise <body> ; à la place, elle utilise <frameset>.

Les attributs Rows et Cols de la balise <frameset> servent à spécifier le nombre de lignes (colonnes) que possède le jeu de cadres, ainsi que la hauteur (largeur) de chaque ligne (colonne).

La balise <frameset> peut contenir des balises <frame>. Chaque balise <frame> représente un document (l'attribut src spécifie l'adresse du document).

Si vous pensez qu'une telle page n'est pas assez complexe, vous pouvez également inclure des balises <frameset> à l'intérieur de balises <frameset>.

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

Que faire après 30 minutes

Cet article a uniquement pour but de donner aux personnes qui n'ont jamais été exposées au HTML une impression préliminaire du HTML, c'est pourquoi beaucoup de choses ne sont pas couvertes. Cet article ne liste pas toutes les balises HTML, et n'introduit pas non plus tous les attributs des balises qu'il liste. De plus, ce qui n'est pas mentionné comprend des choses que je considère très importantes : CSS, JavaScript, XHTML, XML, les standards du Web, et leurs relations avec le HTML. Cependant, il est peu probable que celles-ci soient apprises en 30 minutes. Heureusement, une fois que vous avez commencé, vous pouvez profiter de nombreuses ressources en ligne pour continuer à apprendre. Bien sûr, si vous avez un livre papier, c'est encore mieux ; à cet égard, je recommande « HTML & XHTML: The Definitive Guide ». Voici quelques ressources en ligne que je trouve bonnes :

Source : http://deerchao.net/tutorials/html/html.htm