Ma première page - Cours HTML

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 dites métas informations.
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 :
Exemple de code :
<HTML>
  <HEAD>
    <TITLE>
    </TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Une autre balise est insérée avant le code ci-dessus, c'est la DTD. La DTD (Définition de type de document) spécifie le langage utilisé par votre document.
Il existe plusieurs DTD pour le HTML:
Exemple de code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Cette dernière sera utilisée pour les cours.

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 à droite de la page).
Cliquez sur le lien Afficher le "Afficher le générateur de pages HTML".
Sélectionner la DTD HTML, puis cliquez sur le bouton "VOIR".

Observez la partie où se trouve ces trois petits boutons
vous ne verrez 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 HTML.
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 HTML.
Réduisez et augmentez la fenêtre et observer le comportement du 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 de taille fixe.

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 HTML.

Vous avez maintenant deux paragraphes.
La balise <P> génère un saut de ligne variable suivant le navigateur, 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.

Effacer le texte.
Copier-coller le texte et mettre à la fin <BR> et coller le texte une seconde fois.
Cliquez sur le bouton "VOIR" du générateur HTML.

Vous pouvez très bien insérer entre <P> et </P> une balise <BR>.

Créer un titre de chapitre

La balise H

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 ( pour plus d'information voir le glossaire ).

Exercice

Première étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Tapez :
Exemple de code :
<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" (si vous n'arrivez pas à gérérer les marges) 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 ou séparer des parties.

Exercice

Première étape :
Ouvrez le générateur de code HTML (Voir menu à droite 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 voir le glossaire ).

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.

Définir une couleur de fond

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> ( pour plus d'information voir le glossaire ).
Ce qui nous donne pour une couleur de fond 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.

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

Infos

Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire l'attribut TEXT dans la balise <BODY> ( pour plus d'information voir le glossaire ).
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.

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">.

Ouvrer le générateur HTML et écrivez ce qui vous passe par la tête et visualiser.
La balise HTML et XHTML P crée un paragraphe. Après chaque balise de fin </P>, il se génère un saut de ligne.<P> </P> Le saut de ligne correspond à ...[Voir]La balise HTML et XHTML BR permet de faire une rupture de ligne(force à aller à la ligne).<BR> La balise HTML BR est une balise simple, c'est à dire q...[Voir]La balise HTML et XHTML BODY contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.<BODY> </BODY> C'est...[Voir]