Menu principal

Accueil
Le Matos, le FAI
Découvrir internet
Configurer internet
Créer son site internet
Le Forum
Des ennuis ?!


Le Langage HTML


Le Langage HTML est le langage qui permet d'inclure et de structurer les informations dans une page web. HTML signifie HyperText Mark-up Langage, soit en bref, le HTML est un langage constitué de liens hypertextuels et d'informations enfermées dans des balises. Les balises permettent de définir des zones (zones de textes, zone d'images, zone de vidéos, etc), il y a donc généralement, une balise de début <balise> (signale le début de la zone) et un balise de fin </balise> (signale la fin de la zone).

La Structure d'une page HMTL

<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>
</HTML>

Vous remarquez ici 3 types de balises :

<HTML> et </HTML> : L'ensemble de ces 2 balises forme la page HTML.
<HEAD> et </HEAD> : L'ensemble de ces 2 balises forme l'entête de la page HTML (header en anglais)
<BODY> et </BODY> : L'ensemble de ces 2 balises forme le corps de la page HMTL c-à-dire le contenu de la page.

Les Balises <HTML>

Les balises HTML permettent de définir le début de la page (<HTML>) et la fin de la page (</HTML>). Entre ses 2 balises se trouveront toutes les informations nécéssaires à l'affichage de la page. Entre ces 2 balises, se trouveront donc toujours les balises HEAD et BODY.

The Header (les entêtes)

Les balises HEAD forment les entêtes de la page HTML, dans les entêtes se trouvent des informations importantes sur les feuilles de style, le titre de la page, les balises meta (description du contenu de la page, auteur, type de caractères utilisés) et les fonctions javascript.

Le Corps de la page (BODY)

Entre les balises BODY nous introduirons tous le contenu de la page, c'est ici qu'on ecrira le texte ou qu'on positionnera le code pour les images. La majorité du travail se fera entre ces 2 balises, car on y écrit le code HTML de tout les éléments qui seront vu par le visiteur de la page HTML.


Exemple :
Ouvrer un fichier texte et inscrivez-y le code suivant :

<HTML>
<HEAD>

</HEAD>
<BODY>
Bienvenue sur ma page perso !
</BODY>
</HTML>

Sauvegardez ensuite le fichier sous le nom bonjour.html. Attention, j'ai bien dit bonjour.html et pas bonjour.html.txt, donc si vous quand vous ouvrez le fichier c'est le notepad qui s'ouvre, c'est que vous avez probablement fait cette erreur ! Vous devriez obtenir ceci :



Pas très compliqué, avouez !

Voila, ceci donne du texte brut et ce n'est pas très élégant. On va donc voir au chapitre suivant comment mettre du texte en forme.

Mettre le texte en forme

Passer à la ligne

Il est important de noter que les 2 codes suivants donneront le même résultats :

<HTML>
<HEAD>

</HEAD>
<BODY>
Bienvenue, vous êtes sur ma page perso !
</BODY>
</HTML>

 
<HTML>
<HEAD>

</HEAD>
<BODY>
Bienvenue,
vous êtes sur ma page perso !
</BODY>
</HTML>


La question est donc de savoir comment faire pour commencer une nouvelle ligne. La réponse est simple, au lieu de pousser sur le bouton "enter", il faut simplement rajouter la balise <BR /> :

<HTML>
<HEAD>

</HEAD>
<BODY>
Bienvenue,<BR /> vous êtes sur ma page perso !
</BODY>
</HTML>

Vous obtenez ainsi :

effet de la balise BR

Créer des paragraphes

En HTML, les paragraphes sont délimités par les balises <P> et </P> :

<HTML>
<HEAD>

</HEAD>
<BODY>
Bienvenue,<BR /> vous êtes sur ma page perso !
<P>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer hendrerit tortor a nulla nonummy interdum. Sed dignissim egestas enim. Aliquam eget nisi tincidunt tellus pretium iaculis. Fusce non tellus. Mauris sem. Integer elementum accumsan nibh.
</P>
<P>
Nunc turpis turpis, molestie ac, congue sit amet, faucibus quis, purus. Maecenas pretium, nibh sed vulputate commodo, quam lectus condimentum lacus, dictum tempus dolor ipsum id erat. Morbi convallis posuere nisl. Integer elementum accumsan nibh.
</P>
</BODY>
</HTML>

Voici donc le résultat. Vous remarquez donc que les balises P groupent le texte qui est au milieu et crée un saut de ligne :

effet de la balise P

Mettre un titre
Pour mettre une phrase en évidence, comme un titre par exemple on utilisera les balises <H1> </H1>, <H2> </H2>, <H3> </H3>, <H4> </H4>, <H5> </H5> et <H6> </H6>. Le chiffre indique le degré d'importance du titre, H1 sera le plus important (avec la police la plus grande) et H6 sera le moins important (avec la police la moins grande). Le texte sera aussi mis en gras et on notera un saut de ligne.

<HTML>
<HEAD>

</HEAD>
<BODY>
<H1>Bienvenue,</H1>
<H3>vous êtes sur ma page perso !</H3>
<P>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer hendrerit tortor a nulla nonummy interdum. Sed dignissim egestas enim. Aliquam eget nisi tincidunt tellus pretium iaculis. Fusce non tellus. Mauris sem. Integer elementum accumsan nibh.
</P>
<P>
Nunc turpis turpis, molestie ac, congue sit amet, faucibus quis, purus. Maecenas pretium, nibh sed vulputate commodo, quam lectus condimentum lacus, dictum tempus dolor ipsum id erat. Morbi convallis posuere nisl. Integer elementum accumsan nibh.
<P>
</BODY>
</HTML>

Balises H1, H2, H3, H4, H5, H6

Souligner, Mettre en Gras et Mettre en Italique

Pour souligner un texte, il suffit de le placer entre les balises <U> et </U>.
Pour mettre un texte en gras, il suffit de le placer entre les balises <B> et </B>.
Pour mettre un texte en italique, il suffit de le placer entre les balises <I> et </I>.
Il est aussi possible de faire des combinaisons ainsi pour mettre un texte en gras et en italique, on le placera entre les balises b et ensuite entre les balises i. L'ordre n'a pas d'importance tant que l'on veille bien à ce que les balises ne se chevauchent pas ( <I><B> texte </I></B> ) !

<HTML>
<HEAD>

</HEAD>
<BODY>
<B><U>Bienvenue,</U></B><BR />
<B>vous êtes sur ma page perso !</B>
<P>
<I>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer hendrerit tortor a nulla nonummy interdum. Sed dignissim egestas enim. Aliquam eget nisi tincidunt tellus pretium iaculis. Fusce non tellus. Mauris sem. Integer elementum accumsan nibh.
</I>
</P>
<P>
Nunc turpis turpis, molestie ac, congue sit amet, faucibus quis, purus. Maecenas pretium, nibh sed vulputate commodo, quam lectus condimentum lacus, dictum tempus dolor ipsum id erat. Morbi convallis posuere nisl. Integer elementum accumsan nibh.
<P>
</BODY>
</HTML>

gras, italique, souligné

Afficher une liste
Le codage pour une liste est un petit peu plus complexe, il fait intervenir 2 types de balises, une paire de balises pour indiquer le début et la fin de la liste, <UL> (Unordered List)ou <OL> (Ordered List) ainsi que plusieurs paires de balises pour indiquer le début et la fin de chaque nouvelle ligne <LI>. Il y a 2 types de listes, les listes ordonnées (OL) qui sont numérotées et les listes non-ordonnées (UL) qui ne le sont pas (le numéro est remplacé par une puce). Un exemple sera plus clair :

Liste Non-Ordonnée <UL>

<HTML>
<HEAD>

</HEAD>
<BODY>
<U>Ma liste pour le père Noel</U>
<UL>
        <LI>Une PlayStation 3</LI>
        <LI>Un PC Portable</LI>
        <LI>Une Ferrari</LI>
        <LI>Un voyage aux Caraibes</LI>
</UL>
</BODY>
</HTML>

   Liste Ordonnée <OL>

<HTML>
<HEAD>

</HEAD>
<BODY>
<U>Ma liste pour le père Noel</U>
<OL>
        <LI>Une PlayStation 3</LI>
        <LI>Un PC Portable</LI>
        <LI>Une Ferrari</LI>
        <LI>Un voyage aux Caraibes</LI>
</OL>
</BODY>
</HTML>

Unordered List Ordered List

Petite remarque pour la première fois vous avez peut-être remarqué, un décalage dans le code. On appelle cela une identation, le but est de mettre en évidence une partie de code afin qu'il soit plus facile de relire le code.
Sur la page suivante, on parlera des images, des tableaux et des liens.

Bases du HTML (Suite) >>