Page web, page HTML, de quoi s'agit-il ?

Le langage HTML est un langage de balises. Le texte à afficher sur l'écran est structuré à l'aide des balises qui constitue des indications de mise en page.

L'utilisation des balises est très simple : ce sont des mots "réservés" mis entre chevrons ("<" et ">"). Les balises viennent par paires : une balise ouvre l'indication de mise en page et est forcément suivie, plus loin, de la balise fermante correspondante. Le texte affecté par la balise de mise en page est placé entre la balise ouvrante et la balise fermante qui forment une paire.

Il existe un long catalogue de balises dont les plus communes sont :

Exemple

Examinez le code HTML qui permet de produire le texte du paragraphe précédent. Passez la souris au-dessus des balises pour obtenir des précisions :

<h1>Page web, page HTML, de quoi s'agit-il ?</h1>
<p>Le langage HTML est un <em>langage de balises</em>. Le texte &agrave; afficher sur l'&eacute;cran est <em>structur&eacute;</em> &agrave; l'aide des balises qui constitue des <em>indications de mise en page</em>.</p>
<p>Il existe un long catalogue de balises dont les plus communes sont :</p>
<ul>
<li>&lt;h1&gt; pour indiquer qu'une <strong>phrase ou une expression</strong> constitue un titre de niveau hi&eacute;rarchique 1 (le plus haut) - (&quot;h&quot; pour &quot;header&quot;). </li>
<li>&lt;h2&gt; pour indiquer qu'une phrase ou une expression constitue un titre de niveau hi&eacute;rarchique 2 (un sous-titre). </li>
<li>&lt;h3&gt; pour indiquer qu'une phrase ou une expression constitue un titre de niveau hi&eacute;rarchique 3 (une section).</li>
<li>&lt;p&gt; pour indiquer qu'un bloc de texte forme un paragraphe. Chaque paragraphe est ainsi marqu&eacute; par sa propre balise.</li>
<li>&lt;ul&gt; pour d&eacute;finir une liste &agrave; puces (&quot;ul&quot; pour &quot;unordered list&quot;),</li>
<li>&lt;li&gt; pour d&eacute;finir le contenu associ&eacute; &agrave; chacune des puces. </li>
</ul>
<h2>Exemple</h2>
<p>Examinez le code HTML qui permet de produire le texte du paragraphe pr&eacute;c&eacute;dent:</p>

Remarque

Les balises peuvent être imbriquées. C'est le cas dans l'exemple :

L'imbrication des balises est à surveiller, certains navigateurs réagissent mal aux balises mal imbriquées, et vont parfois jusqu'à refuser d'afficher la page. D'autres sont très tolérants et "réparent au mieux" les erreurs d'imbrication.

Balises d'entêtes

Hormis les balises précisant la mise en page du document, il est nécessaire d'inclure des balises utilisées par le navigateur lors de ses échanges avec le serveur (l'ordinateur de qui le navigateur obtient la page à afficher). Le texte contenu dans ces balises n'est pas affiché à l'écran. Examinez l'entête de ce document.

Encore une fois, passez la souris au-dessus des balises pour accéder à un commentaire :

<html>
<head>
<title>Page web, HTML</title>
</head>

<body>

...

</body>

</html>

Exercice

Téléchargez cette page dans votre répertoire Web (dans votre répertoire personnel) sous le nom index.htm.

Exercice

Ajoutez à cette page des informations personnelles :

Sauvegardez (bouton "Mettre à jour") et visualisez votre page ainsi modifiée.

Exercice

Dans kEdit, créez un nouveau fichier. vous allez maintenant créer et éditer le code HTML d'une nouvelle page. Attention, il est peut-être sage de faire un copier-coller de la page sur laquelle vous avez travaillé jusqu'à maintenant !

Vous intitulerez cette nouvelle page "Mes loisirs", et vous y listerez vos loisirs (comme vous avez fait sur la page précédente), en étant peut-être un peu plus loquace. Vous nommerez le fichier correspondant loisirs.htm.

Prenez soin de donner un titre approprié à cette page (balise <title> contenue dans la balise <head>).

Vosu aurez donc ajouté deux fichiers HTML dans votre répertoire Web.