Rechercher sur le site
Tous les Balises Tous les Attributs

SUR LA ZONE HTML

Glossaire HTML

BalisesAttributs
 

Cours

HTMLXHTML
 
JavascriptWAI
 

Divers

TermesCode source
 
LogithèquesPlugin
 

Qu'en pensez-vous?

Livre d'orPartenaires
 

CREATIONS

 
Internet3D
 
MusiqueCV
 
Divers
 

AUTRES ZONES

 
CSSFlash MX
 
Liens utiles
 


Envoyer l'url de la page à un ami

 Cours HTML : Ma première pageRetour à la page d'introRetour à 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 :
<HTML>
  <HEAD>
    <TITLE>
    </TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>
Haut de la page

 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.
Haut de la page

 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.
Haut de la page

 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 ).
Haut de la page

 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.
Haut de la page

 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.
Haut de la page

 Exercice

Première étape :
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".
Haut de la page

 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.
Haut de la page

 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.
Haut de la page

 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.
Haut de la page

 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.
Haut de la page

 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".
Haut de la page

 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.
Haut de la page

 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.
Haut de la page