Initiation au HTML
Dernière mise à jour, le 22 Juillet 2007
Accueil > Initiation à HTML
Qu'est ce qu'une page web ?
Il s'agit ni plus ni moins que d'un fichier, qui contient seulement des caractères alphanumériques. Autrement dit, vous n'avez besoin que de votre bloc-notes, ou d'un éditeur de texte quelconque pour créer un site Internet. Les logiciels que j'énumère dans la zone "Téléchargements" permettent ensuite de gagner du temps de développement mais il est préfèrable de connaître les bases du langage pour arriver à un site de qualité.
Lors de l'affichage d'un tel fichier, votre navigateur Internet (Internet Explorer, Firefox, Opera, ...) fait tout le travail. En effet, ce dernier lit le fichier en question, et repère ce qu'on appelle les balises ou les tags HTML. Ces balises indiquent au navigateur comment afficher le contenu de la page (mise en valeur des paragraphes, titre de la page, titre d'une partie, d'une sous-partie, caractères en gras, retour à la ligne, etc).
Ces balises fonctionnent par paire, l'une définit le début d'un bloc et l'autre la fin.
Par exemple, le titre d'une page est codé grâce à la balise <title>, et ce de la manière suivante dans votre éditeur de texte : <title>Ceci sera le titre de la page</title>.
Remarquez que ces deux balises (en rouge) ne se différencient que par un slash "/" mais il est indispensable.
Entrons dans le vif du sujet et créons notre première page, la page "Hello World"...
Le squelette d'une page web
Toutes les pages web sont construites d'une manière identique. Elles se composent d'une entête, qui peut contenir tout un tas d'informations, puis d'un corps, qui contient toutes les informations affichées dans le navigateur.
Le squelette de toute page est défini par l'utilisation de trois balises : HTML, HEAD et BODY. La première indique au navigateur qu'il s'agit bien d'un fichier HTML (car un navigateur peut afficher un fichier image ou un fichier texte), la seconde permet de donner des informations sur la page (dont le titre) et correspond à l'entête du document et la troisième définit le corps de la page et contient toutes les informations que seront affichées sur l'écran de l'interanute.
Le cadre suivant correspondant à l'édition d'un fichier HTML, identifiez les trois (paires) balises dont nous venons de parler.
Code source de la page "Hello World". 
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Ce bloc délimité par les balises <!-- et --> correspond à un commentaire qui n'est pas affiché sur le navigateur Internet. Les commentaires sont souvent très utiles lors du développement
-->
Hello World !!
</body>
</html>
Vous pouvez copier ce code dans votre bloc-notes. Enregistrez votre fichier, par exemple hello-world.html et ouvrez-le avec votre navigateur, vous aperceez normalement "Hello World !!" et le titre que vous avez renseigné.
- Par défaut le bloc-notes enregistre les fichiers au format .txt, dans notre cas vous devez spécifier l'extension .htm ou . html
- Les retours à la ligne ou plusieurs espaces consécutifs représentent au maximum un espace dans le navigateur.
Les rois exemples ci dessous sont donc équivalents :
Hello World !!!
</body>
</body>
Il nous reste maintenant à voir les balises les plus communes et leur caractéristique respective. Je vous rappelle que le texte et les balises doivent se trouver entre les balises <body> et </body>.
Les principales balises
Il en existe plusieurs dizaines, mais une minorité d'entre elles seulement nous intéressent.
la balise "paragraphe" <p> et la balise "retour à la ligne" <BR>
La balise la plus utilisée est peut-être la balise <p>, elle signifie "paragraphe". elle permet de dissocier deux paragraphes. A l'affichage, l'espace entre les paragraphes est plus important que l'espace entre les ligens d'un même paragraphe.
Il est important de remarquer que dans le cas d'une phrase relativement longue située entre les balises <p> et </p>, le navigateur renvoie le texte à la ligne automatiquement si besoin. Inutile d'aller à la ligne dans votre éditeur (un retour à la ligne, deux espaces accolés ou un espace accollé à un retour à la ligne sont interprétés comme un unique espace par le navigateur), le seul moyen d'aller à la ligne est l'utilisation de la balise <br>. <br>, contrairement à tous les autres tags, ne s'utilise pas par paire.
Remarque : En réalité, le corps de notre page Hello World ci-dessus aurait du contenir <p>Hello World</p>.
Exemple : Redimensionner la fenêtre de l'aperçu pour voir coment sont affichés les paragraphes.
Page contenant deux paragraphes.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
l'ensemble des balises "titre" <h1>, <h2>, ... et <h6>
Elles permettent de mettre en valeur des textes correspondant aux titres (h1), sous-titres (h2), titre de paragraphe (h3), jusqu'à la balise h6. La plupart du temps, vous n'utiliserez que les balises h1 et h2 voire h3.
Pour mieux comprendre, vous pouvez regarder le code source décrit ci-dessous puis regarder l'aperçu de l'exemple
Exemple : les six balises h1 à h6 sont utilisées dans cette ordre, suivies de deux paragraphes.
Utilisation du balisage des titres.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<h1>Ceci est une définition Wkipedia de HTML</h1>
<!--Le navigateur renvoie à la ligne automatiquement de la même manière que la balise <p> -->
<h2>L'Hypertext Markup Language</h2>
<h3>généralement abrégé HTML</h3>
<h4>est le langage informatique</h4>
<h5>créé et utilisé pour écrire les pages Web</h5>
<h6> HTML permet en particulier</h6>
<p>d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML). Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
La balise "image" <img>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
La balise "lien" <a>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
La balise "calque" <div>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
Les balises "tableau" <table>, <tr> et <td>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
La balise italique <em>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
La balise "caractères gras" <strong>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
Les balises "puce" <ul> et <li>
texte
legende.
<html>
<head>
<!-- Commentaires
ici
-->
<title>Titre de la page !!!</title>
</head>
<body>
<!-- Commentaires :
Comme dans l'exemple précédent et pour n'importe quelle page, il est possible d'ajouter des commentaires entre les balises <!-- et -->
-->
<p>L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage.</p>
<!-- remarquez la balise <br> qui suit qui permet d'aller à la ligne -->
<p>Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).
<br>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l'Extensible Markup Language (XML).</p>
</body>
</html>
