Tous les Balises 
Tous les Attributs 
Envoyer l'url de la page à un ami
 | Cours HTML : Ma première page | Retour à la page d'intro |
Introduction
Info
Une page HTML se compose de quatre balises indispensables :
- La balise <HTML></HTML> qui contient toutes les autres balises. Dans tous les cas votre document source doit commencer par <HTML> et se finir par </HTML>.
- La balise <HEAD></HEAD> qui définit l'en-tête du document. On y place des informations qui ne sont pas visibles.
Par exemple, des scripts, des feuilles de styles, des informations sur l'auteur de la page, et sur la page en elle même.
- La balise <TITLE></TITLE> qui se trouve dans la balise <HEAD> nomme la page, c'est le seul élément visible qui se trouve dans l'en-tête.
- La balise <BODY></BODY> contient toutes les informations qui seront visibles, c'est le corps de votre document.
Voici comment elles sont organisées dans le code de la page Html :
- La balise <HTML></HTML> qui contient toutes les autres balises. Dans tous les cas votre document source doit commencer par <HTML> et se finir par </HTML>.
- La balise <HEAD></HEAD> qui définit l'en-tête du document. On y place des informations qui ne sont pas visibles.
Par exemple, des scripts, des feuilles de styles, des informations sur l'auteur de la page, et sur la page en elle même.
- La balise <TITLE></TITLE> qui se trouve dans la balise <HEAD> nomme la page, c'est le seul élément visible qui se trouve dans l'en-tête.
- La balise <BODY></BODY> contient toutes les informations qui seront visibles, c'est le corps de votre document.
Voici comment elles sont organisées dans le code de la page Html :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Donner un titre à votre page HTML.
Exercice
Pour donner un titre à votre page HTML, rien de plus simple.
Première étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Cliquez sur le bouton VOIR du générateur.
Observez la partie où se trouve ces trois petits boutons
vous ne verez que le nom du Navigateur.
Seconde étape :
Maintenant, mettez du texte (ce que vous voulez) entre <TITLE> et </TITLE>.
Cliquez sur le bouton VOIR du générateur.
Votre page a maintenant un titre.
Première étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Cliquez sur le bouton VOIR du générateur.
Observez la partie où se trouve ces trois petits boutons
vous ne verez que le nom du Navigateur.Seconde étape :
Maintenant, mettez du texte (ce que vous voulez) entre <TITLE> et </TITLE>.
Cliquez sur le bouton VOIR du générateur.
Votre page a maintenant un titre.
Insérer du texte dans votre page HTML
Info
Nous allons à présent voir comment introduire du texte dans notre page HTML et observer comment il réagit.
Voici du texte.
Faites un copier-coller du texte ci-joint entre <BODY> et </BODY>.
Cliquez sur le bouton VOIR du générateur.
Réduisez et augmentez la fenêtre, et observer le texte.
Le texte se reformate suivant la taille de la fenêtre, c'est un élément à retenir lors de la conception de votre page.
Pour ne plus avoir ce problème, il faut insérer votre texte dans un tableau.
Voici du texte.
Faites un copier-coller du texte ci-joint entre <BODY> et </BODY>.
Cliquez sur le bouton VOIR du générateur.
Réduisez et augmentez la fenêtre, et observer le texte.
Le texte se reformate suivant la taille de la fenêtre, c'est un élément à retenir lors de la conception de votre page.
Pour ne plus avoir ce problème, il faut insérer votre texte dans un tableau.
Les paragraphes
Nous allons maintenant structurer le texte en créant des paragraphes.
Voici du texte.
Le paragraphe se détermine grâce à la balise <P> </P>.
Mettez après la balise <BODY> la balise <P>, copiez collez le texte ci-joint et mettez à la fin du texte </P>.
Recommencez la manoeuvre à la suite.
Cliquez sur le bouton VOIR du générateur.
Vous avez maintenant deux paragraphes.
La balise <P> génère un saut de ligne, c'est son inconvénient.
Il est tout à fait possible de justifier le texte d'un paragraphe grâce à l'attribut ALIGN ( pour plus d'information voir le glossaire ).
Voici du texte.
Le paragraphe se détermine grâce à la balise <P> </P>.
Mettez après la balise <BODY> la balise <P>, copiez collez le texte ci-joint et mettez à la fin du texte </P>.
Recommencez la manoeuvre à la suite.
Cliquez sur le bouton VOIR du générateur.
Vous avez maintenant deux paragraphes.
La balise <P> génère un saut de ligne, c'est son inconvénient.
Il est tout à fait possible de justifier le texte d'un paragraphe grâce à l'attribut ALIGN ( pour plus d'information voir le glossaire ).
Allez a la ligne
Pour éviter les sauts de ligne, la balise <BR> qui ne possède pas de balise de fin, est très utilisée.
Effacez le texte.
Copier-coller le texte et mettez à la fin <BR> et coller le texte une seconde fois.
Cliquez sur le bouton VOIR du générateur.
Vous pouvez très bien insérer entre <P> et </P> une balise <BR>.
Je vous conseille fortement de bannir la balise <P> au profit de la balise <BR> qui est plus maniable.
Effacez le texte.
Copier-coller le texte et mettez à la fin <BR> et coller le texte une seconde fois.
Cliquez sur le bouton VOIR du générateur.
Vous pouvez très bien insérer entre <P> et </P> une balise <BR>.
Je vous conseille fortement de bannir la balise <P> au profit de la balise <BR> qui est plus maniable.
Créer un titre de chapitre
Info
Maintenant que vous savez créer des paragraphes, il nous reste à leur donner un titre.
C'est la balise <Hn> </Hn> qui le permet. Le "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre. 1 est la plus grosse taille.
C'est la balise <Hn> </Hn> qui le permet. Le "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre. 1 est la plus grosse taille.
Exercice
Première étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Tapez :
Puis à la suite recommencez la manipulation en remplaçant <H1> par <H6>.
Vous observez que <Hn> génère un saut de ligne important.
Je vous conseille fortement de bannir la balise <Hn> au profit de la balise <BR> et la balise <FONT> qui sont plus maniables.
Nous étudierons la balise html <FONT> dans le cours "Le texte".
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Tapez :
<H1> votre titre </H1>
Copiez, collez du texte à la suite.Voici du texte.Puis à la suite recommencez la manipulation en remplaçant <H1> par <H6>.
Vous observez que <Hn> génère un saut de ligne important.
Je vous conseille fortement de bannir la balise <Hn> au profit de la balise <BR> et la balise <FONT> qui sont plus maniables.
Nous étudierons la balise html <FONT> dans le cours "Le texte".
Créer un filet horizontal
Filet horizontal
Je parle dans ce chapitre du filet horizontal, car il est très pratique pour séparer de chapitre, cela donne plus de clarté au document HTML.
Il est très utilisé aussi pour marquer la fin du document. Dans ce cas, on trouve en général des informations sur le copyright.
Il est très utilisé aussi pour marquer la fin du document. Dans ce cas, on trouve en général des informations sur le copyright.
Exercice
Pemière étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Copiez, collez du texte et taper <HR> (<HR> est une balise simple). Voici du texte.
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Copiez, collez du texte et taper <HR> (<HR> est une balise simple). Voici du texte.
Info
Sachez que l'on peut définir la longueur, l'alignement de la balise <HR>.
Pour plus d'information sur les attributs de la balise <HR> consultez le Glossaire HTML.
Pour plus d'information sur les attributs de la balise <HR> consultez le Glossaire HTML.
Révision des balises <P>, <BR>, <Hn> et <HR>.
Info
Voici un petit exercice qui consiste à recréer une page HTML.
Pour cet exercice, il faut avoir été consulté le glossaire.
La page à recréer.
Pour cet exercice, il faut avoir été consulté le glossaire.
La page à recréer.
Définir une couleur de font.
Info
Une page HTML n'est pas forcément blanche. Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire l'attribut BGCOLOR dans la balise <BODY>.
Ce qui nous donne pour une couleur de font noir <BODY bgcolor="Black"> ou <BODY bgcolor="#000000">.
Je mets à votre disposition les couleurs reconnues par Netscape et Explorer (couleur).
Lisez bien la page des couleurs et testez ensuite.
Dans le HTML4, il est conseillé de définir la couleur du fond par la feuille de style, mais nous y reviendrons lorsque nous l'étudierons.
Il est possible de mettre une image en fond, mais nous l'étudierons dans le le cours de HTML "Image".
Pour cela, il faut introduire l'attribut BGCOLOR dans la balise <BODY>.
Ce qui nous donne pour une couleur de font noir <BODY bgcolor="Black"> ou <BODY bgcolor="#000000">.
Je mets à votre disposition les couleurs reconnues par Netscape et Explorer (couleur).
Lisez bien la page des couleurs et testez ensuite.
Dans le HTML4, il est conseillé de définir la couleur du fond par la feuille de style, mais nous y reviendrons lorsque nous l'étudierons.
Il est possible de mettre une image en fond, mais nous l'étudierons dans le le cours de HTML "Image".
Définir la couleur du texte par défaut
Info
Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire l'attribut TEXT dans la balise <BODY>.
Ce qui nous donne pour une couleur de texte blanc <BODY text="#FFFFFF"> ou <BODY text="White">.
Je mets à votre disposition les couleurs dites web qui sont des couleurs reconnues par Netscape et Explorer (couleur).
Lisez bien la page des couleurs et testez ensuite.
Dans le HTML4, il est conseillé de définir la couleur du texte par la feuille de style, mais nous y reviendrons lorsque nous l'étudierons.
Pour cela, il faut introduire l'attribut TEXT dans la balise <BODY>.
Ce qui nous donne pour une couleur de texte blanc <BODY text="#FFFFFF"> ou <BODY text="White">.
Je mets à votre disposition les couleurs dites web qui sont des couleurs reconnues par Netscape et Explorer (couleur).
Lisez bien la page des couleurs et testez ensuite.
Dans le HTML4, il est conseillé de définir la couleur du texte par la feuille de style, mais nous y reviendrons lorsque nous l'étudierons.
Exercice
Ce petit exercice va vous familiariser avec les balises acceptant plusieurs attributs en même temps.
Je désire un fond bleu et une couleur de texte rouge. Nous allons donc écrire :
- pour le font bleu <BODY BGCOLOR="#0000FF">
- pour le texte rouge nous allons rajouter l'attribut TEXT. Ce qui nous donne <BODY BGCOLOR="#0000FF" TEXT="#FF0000">.
Ouvrez le générateur et écrivez ce qui vous passe par la tête et visualisez.
Je désire un fond bleu et une couleur de texte rouge. Nous allons donc écrire :
- pour le font bleu <BODY BGCOLOR="#0000FF">
- pour le texte rouge nous allons rajouter l'attribut TEXT. Ce qui nous donne <BODY BGCOLOR="#0000FF" TEXT="#FF0000">.
Ouvrez le générateur et écrivez ce qui vous passe par la tête et visualisez.
Ma première page
Introduction Chapitres cours
Avant propos
Ma première page Générateur de page
