Faire-un-site.com

Quelques bases sur le langage HTML

Même s’il existe des solutions qui ne nécessitent pas de connaissances techniques pour faire un site Internet comme wifeo.com, il peut être utile d’avoir quelques notions pour comprendre comment est constituée une page de site Internet.

La page que vous êtes en train de regarder est écrite principalement en HTML. Si elle avait été écrite en ASCII, c'est-à-dire de façon classique et sans HTML, vous pourriez aussi lire le texte. Mais certaines mises en forme et agréments comme la taille des caractères, les mises en gras, les polices de caractère, les liens vers des pages externes sur lesquels il suffit de cliquer pour s’y rendre, n’apparaitraient pas.

Le HTML est donc principalement un langage de mise en forme de texte, qui permet de faire de l’HyperText. Les lettres HTML signifient Hypertext Markup Language. Un hypertexte est un texte qui contient des liens vers d’autres textes, et vers d’autres pages et sites Internet.

Le HTML est un langage qui fonctionne par balisage. C'est-à-dire que l’on place une balise sous la forme de caractères spéciaux et bien définis destinée à modifier le texte affiché. Ces balises seront interprétées par le navigateur, qui est un logiciel de visualisation comme Internet Explorer ou Mozilla Firefox et qui permettent d’afficher les pages Internet.

Les sources d’une page HTML :
A quoi ressemble le HTML ? Lorsque l’on regarde une page dans son navigateur Internet, la page interprète le langage pour montrer la page telle que le programmateur HTML l’a désirée. Mais on ne voit pas le langage. Pour voir la page avec ses balises HTML, il suffit de faire afficher les sources par son navigateur. La façon d’afficher les sources dépend du navigateur utilisé. Par exemple avec Internet Explorer, cliquez sur le menu « Affichage », puis « Source ». Avec Google Chrome, cliquez sur la petite clé à droite, puis sur « Outils », et enfin « Afficher la source ».

La structure de la page :
Les informations dans une page HTML sont encadrées par certaines balises qui indiquent que le navigateur est devant une page en HTML, que l’entête de la page est à tel endroit, et que le corps de la page est à tel endroit. Les balises sont ainsi sous la forme :

<html>
<head>
L’entête sera ici
</head>
<body>
Le corps de la page sera ici
</body>
</html>

Dans l’entête sont placées des informations qui seront la plupart du temps non visibles par le visiteur, mais qui seront lues par les navigateurs et par les moteurs de recherche.

Voyons maintenant quelques moyens de mises en forme de texte en HTML.

La taille des caractères :
On place une balise H de chaque coté de la phrase afin de déterminer la taille des caractères :

<H1>Grande taille</H1>

Grande taille

<H2>Taille moins grande</H2>

Taille moins grande

<H3>Taille moyenne</H3>

Taille moyenne

<H4>Petite taille</H4>

Petite taille

<H5>Très petite taille</H5>

Très petite taille

<H6>Taille encore plus petite</H6>

Taille encore plus petite

Les caractères gras :
<B> Mettre une phrase en gras </B>
ou
<strong>Mettre une phrase en gras</strong>
Mettre une phrase en gras

La balise <strong> est plus indépendante par rapport au changement de style dans le reste du texte.

Barrer un texte :
Cela se fait avec la balise <STRIKE>
Exemple :
<STRIKE>Ce texte est complètement barré</STRIKE>

~~Ce texte est complètement barré~~

Souligner un texte :
<U>Ce texte mérite d’être souligné</U>

Ce texte mérite d’être souligné

Texte en italique :
<I>ce texte est en italique</I>

ce texte est en italique

On peut naturellement combiner plusieurs balises ensemble. Par exemple :
<B><I>ce texte est en italique gras</I></B>

ce texte est en italique gras

Les tableaux en HTML :
Le tableau dans une page Internet permet naturellement de tracer un tableau avec une certaine quantité de colonnes et de lignes, mais le tableau permet également de faire une disposition difficile à faire sans tableau.

La structure de base d’un tableau HTML avec une colonne et une ligne est :

<table>
<tr>
<td> cellule </td>
</tr>
</table>

Ce qui donne un tableau à une ligne et à une cellule.

La balise Table délimite le tableau
La balise tr délimite la ligne
La balise td délimite la cellule

Si on ajoute un deuxième couple de td, le tableau se transforme en deux cellules :

<table>
<tr>
<td>cellule1</td>
<td>cellule2</td>
</tr>
</table>

Mais le cadre du tableau est invisible. Pour voir les traits, il faut ajouter border :

<table border="1">
<tr>
<td>cellule1</td>
<td>cellule2</td>
</tr>
</table>

Ce qui donne :

cellule1

cellule2

Pour faire un tableau à quatre cellules réparties sur deux lignes, on doit écrire :

<table border="1">
<tr>
<td>cellule1</td>
<td>cellule2</td>
</tr>
<tr>
<td>celluleA</td>
<td>celluleB</td>
</tr>
</table>

Ce qui donne :

cellule1	cellule2
celluleA	celluleB

On a des difficultés, en HTML à positionner des images ou des paragraphes côte à côte. L’intérêt de la fonction tableau est de pouvoir le faire.
Par exemple voici deux paragraphes placés côte à côte grâce à un tableau à deux cellules dont les bords sont à zéro :

Article 1 :
Je dois travailler au moins une heure à faire un site Internet. Si je ne peux pas construire mon site, je dois prendre une feuille et un stylo et noter mes idées.

Article2 :
Je dois lire entièrement le site Internet nommé Faire-un-site.com qui est vraiment très bien. Je dois lire au moins deux pages par semaine, et prendre des notes si cela est nécessaire.

Voici deux images placées côte à côte grâce à un tableau :

D’autres attributs du tableau sont possibles comme des informations sur la largeur, en pourcentage de la page ou en pixel, ou la largeur des traits ou la couleur des cellules. Par exemple le code HTML suivant :

<table width="175" height="105" border="3" bordercolor="#FF9900">
<tr>
<td bgcolor="#0033FF">cellule1</td>
<td bgcolor="#FF0066">cellule2</td>
</tr>
<tr>
<td bgcolor="#CC3399">celluleA</td>
<td bgcolor="#33CC66">celluleB</td>
</tr>
</table>

Donnera :

cellule1	cellule2
celluleA	celluleB

Les images :

Il est naturellement possible de placer des images comme des photos ou des dessins sur une page HTML.

On peut imposer la taille de l’image :

Et on peut même permettre de cliquer sur l’image :

Les liens hypertextes :
Un texte peut être enrichi par des liens vers des pages internes au site ou vers des pages d’un autre site Internet.

Voir cette <a href="http://www.faire-un-site.com/faire-un-site-ou-un-blog.php">autre page</a> intéressante

Voir cette autre page intéressante

Si l’on désire que la nouvelle page s’ouvre dans une nouvelle page du navigateur, on ajoute la balise _Blank

Voir cette <a href="http://www.faire-un-site.com/faire-un-site-ou-un-blog.php" target="_blank">autre page</a> intéressante

Voilà donc un petit tour d’horizon du HTML incomplet mais destiné à permettre à comprendre les bases. En effet, même avec un logiciel WYSIWYG ou un site comme Wifeo il peut être nécessaire de faire des petites modifications directement dans le code HTML.